Creando share buttons animados

Posteado el 27. Nov, 2010 por tuto in Jquery

En este link podrás ver el demo de como quedarán los botones animados con Jquery que te enseñaremos en este tutorial

PASO 1
Creamos una carpeta nueva llamada siguenos, dentro de la cual creamos una carpeta nueva con el nombre de imag donde vamos a colocar las imágenes que vamos a utilizar en este tutorial.

Share buttons

PASO 2
Vamos a Adobe Dreanweaver y creamos un nuevo documento HTML.

Share buttons

PASO 3
Debajo de la etiqueta vamos a copiar el siguiente código html4strict.

Share buttons

PASO 4
Con el comando Ctrl + S guardamos nuestro documento con el nombre siguenos.html

Share buttons

PASO 5
Vamos al menú File – New y creamos un nuevo documento CSS.

Share buttons

PASO 6
Dentro del documento copiamos el siguiente código CSS.

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:0px;
	padding:0px;
}
 
body{
	/* Setting default text color, background and a font stack */
	color:#eeeeee;
	font-size:13px;
	background: #1b232a;
	font-family:Arial, Helvetica, sans-serif;
}
 
/* The code for the share box starts here: */
 
#share{
	/* The share box container */
	width:500px;
	background:#292929;
	height:220px;
	margin:60px auto;
	overflow:hidden;
 
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}
 
#share-label{
	/* The image on the right */
	background:url(../img/siguenos.png) no-repeat 50% 50%;
	float:left;
	height:220px;
	width:200px;
}
 
#stage{
	/* This is where the animation takes place */
	position:relative;
 
	border-right:1px solid #DDDDDD;
	width:290px;
	height:220px;
	background:white;
	float:left;
 
	border-bottom-left-radius:12px;
	border-top-left-radius:12px;
 
	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-topleft:12px;
 
	-webkit-border-bottom-left-radius:12px;
	-webkit-border-top-left-radius:12px;
}
 
.btn{
	/* This class is assigned to every share button */
	background-color:white;
	height:90px;
	left:0;
	top:0;
	width:60px;
	position:relative;
	margin:20px 0 0 10px;
	float:left;
}
 
.bcontent{
	/* Positioned inside the .btn container */
	position:absolute;
	top:auto;
	bottom:20px;
	left:0;
}
 
/* Individual rules for every share button */
 
.flikcr{	background:url(../img/sflick.png) no-repeat -4px bottom;}
.rss{	background:url(../img/srss.png) no-repeat -4px bottom;}
.facebook{	background:url(../img/sfacebook.png) no-repeat -5px bottom;}
.twitter{	background:url(../img/stwitter.png) no-repeat -5px bottom;}
.youtube{	background:url(../img/syoutube.png) no-repeat -7px bottom;}
 
.thanksto{
	position:absolute;
	bottom:2px;
	right:71px;
	font-size:10px;
	width: 115px;
}
 
.thanksto a,.thanksto a:visited{
	color:#BBB;
}
 
/* Customizing the facebook share button */
 
span.fb_share_no_count {
	display:block;
}
 
span.fb_share_count_top.fb_share_no_count {
	line-height:54px;
}
 
span.fb_share_count_nub_top.fb_share_no_count{
	display:none;
}
 
/* The styles below are only necessary for the demo page */
 
h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
}
 
h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	padding-right:140px;
	right:0;
	text-align:right;
	text-transform:uppercase;
	top:15px;
}
 
.clear{
	clear:both;
}
 
#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:865px;
	position:relative;
}
 
a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}
 
a:hover{
	text-decoration:underline;
}
 
p{
	/* The tut info on the bottom of the page */
	padding:10px;
	text-align:center;
}

Share buttons

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css

Share buttons

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

<div id="main">
 
  <h1>Botones Animados con, CSS & jQuery</h1>
 
 <div id="share">
 
     <div id="stage">
 
     <div class="btn flikcr">
       <div class="bcontent"><a href="#"><img src="img/flickr.png" alt="Flickr" width="60" height="60" border="0" /></a></div>
     </div>
     <div class="btn twitter">
       <div class="bcontent"><a href="http://www.twitter.com/tutorialesweb"><img src="img/twitter.png" alt="twitter" width="60" height="60" border="0" /></a></div>
     </div>
     <div class="btn youtube">
       <div class="bcontent"><a href="#"><img src="img/youtube.png" alt="You Tube" width="60" height="60" border="0" /></a></div>
     </div>
     <div class="btn rss">
       <div class="bcontent"><a href="#"><img src="img/rss.png" alt="RSS" width="60" height="60" border="0" /></a></div>
     </div>
     <div class="btn facebook">
       <div class="bcontent"><a href="http://www.facebook.com/tutorialesenlaweb"><img src="img/facebook.png" alt="Facebook" width="60" height="60" border="0" /></a></div>
     </div>
 
    <div class="thanksto"><a href="http://www.tutorialesenlaweb.com">tutoriales en la web</a></div>
 
    </div>
 
     <div id="share-label">
     </div>
 
 </div>
 
</div>

Share buttons

PASO 9
Por ultimo creamos una carpeta llamada js dentro de la carpeta siguenos y copiamos los archivos js que adjunto en este tutorial.

Share buttons

PASO 10
Listo ya tenemos nuestro rotador de imágenes.

Share buttons

Descarga el editable de Share buttons Jquery

Tags: , ,

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes