Botones de Redes Sociales con sprites y transiciones CSS3

Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar m?s, pues aqu? va.

Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripci?n por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ?cono se mueve hacia arriba mientras el fondo cambia de color.

Este gadget lo veremos en dos versiones, uno con 5 botones peque?os alineados de forma horizontal, y otro de 4 botones un poco m?s grandecitos y alineados en dos columnas. Est?n hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ?por qu�? por pereza nada m?s, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podr? hacerlo sin ning?n problema.
Entonces, para ponerlos en tu blog, entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega el c?digo de los botones que m?s te gusten.

Este es la primera versi?n de 5 botones.

Y este es el c?digo que has de pegar en tu gadget:

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oRzUtSSbhrt6hGh6mJ4SttU4ihNCfAJtYZ5H8u9oIuBl0iekyIn3bFP0iov_YzNHJkeMjw43UWSn6WUAotxMa8bA9y-GJQLURX3huimNQl4LDZBAYEELi5RzM8Oitd2C-1UEzqkz9KAc/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9pbBOA3CgeU29_Lrbzjln_auhMp-lpdzFHAulHHrhbYQq6TracB_WeUWzJqsgK-b1m80WZxid9fAaOiqLwtsM8vfpk1wU5R7qdL0MT93hcl1XLby-mWjhrCcFLqQDoW7YAZnxo2gIsMR/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEL_7ll95CfSbG8xdb97tYTTJFu1DK4ymcPGVEfifa8ZSTvY1AbCL-aEJLRzfEh7AGih1EutriYMnFJpKiHuKHXr9W-PplyWjGJxYoxHSyJCynGMPIT0UhA9gb6Ttdz2fESg6nvmKScqQd/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE3_lQynWwxNQJeTKcgNujVWmHn0UcsuawybP_hlSR_2NDJE_JVrsDeyaIjzkQ-q5ZuD71M-_NvUSJfGWVeck3UYdIZh6gsj5eA2WUleTE1VCDWOegvcMrtKB2L-lU6zot5zKlWS0y6FXj/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl0njREEc1d0tQQK21vchTICChO9JYXaz7eyZM7XfPHGd5ZphQUrvxW7Xu5YReu0Vb6mw58vmbeT-dRaCYw4xZtgmRHbY9k388WCOPnKHnezw-oTJtSRId0FM8O8cZwACuEgwH1bU21YCR/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwW80VuQzr5NQJKh0UlSN13e9jMmg-_9g11RvmGVtGOntLr0BEFPFSaF8HwpzZywxKTjWOfZpkPwSyLLATTJalVMFbehTKaBjZNN8nNpxs2tOhgiB60JqoXRhHozP_u1W6w0_x0cKb47bk/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Esta es la otra versi?n, la de 4 botones.

Y este es el c?digo que pegar?as en tu gadget HTML/Javascript.

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oRzUtSSbhrt6hGh6mJ4SttU4ihNCfAJtYZ5H8u9oIuBl0iekyIn3bFP0iov_YzNHJkeMjw43UWSn6WUAotxMa8bA9y-GJQLURX3huimNQl4LDZBAYEELi5RzM8Oitd2C-1UEzqkz9KAc/s0/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEL_7ll95CfSbG8xdb97tYTTJFu1DK4ymcPGVEfifa8ZSTvY1AbCL-aEJLRzfEh7AGih1EutriYMnFJpKiHuKHXr9W-PplyWjGJxYoxHSyJCynGMPIT0UhA9gb6Ttdz2fESg6nvmKScqQd/s0/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE3_lQynWwxNQJeTKcgNujVWmHn0UcsuawybP_hlSR_2NDJE_JVrsDeyaIjzkQ-q5ZuD71M-_NvUSJfGWVeck3UYdIZh6gsj5eA2WUleTE1VCDWOegvcMrtKB2L-lU6zot5zKlWS0y6FXj/s0/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl0njREEc1d0tQQK21vchTICChO9JYXaz7eyZM7XfPHGd5ZphQUrvxW7Xu5YReu0Vb6mw58vmbeT-dRaCYw4xZtgmRHbY9k388WCOPnKHnezw-oTJtSRId0FM8O8cZwACuEgwH1bU21YCR/s0/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwW80VuQzr5NQJKh0UlSN13e9jMmg-_9g11RvmGVtGOntLr0BEFPFSaF8HwpzZywxKTjWOfZpkPwSyLLATTJalVMFbehTKaBjZNN8nNpxs2tOhgiB60JqoXRhHozP_u1W6w0_x0cKb47bk/s0/icon-social-reflect.png) no-repeat;
}
</style>

<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

F?cil y r?pido, ?no? Lo ?nico que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
En el caso de la primera versi?n deber?s poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripci?n por correo electr?nico en Feedburner.

Y si no te gustan los colores, tambi�n puedes cambiarlos. Los c?digos hexadecimales que est?n en negrita son los colores en su estado normal, y los que est?n en color naranja son los colores al pasar el cursor.

Y ahora s?, es todo.