Botones de redes sociales con efecto expandible

Botones de redes sociales con efecto expandible

Buenas!, ya con lo que podría ser un nuevo tag "redes sociales", en este tutorial como poner en nuestro blog una lista de botones sociales con efecto hover muy elegante y buenisimo.
El efecto hover trata de que cuando el cursor / mouse pase por la lista este se expande, no usa script, javascript ni jquery solo con puro CSS3 que sencillamente se puede modificar.
Considero a este con un widget de suma importancia, digo por el echo de tener vigente nuestras redes sociales para aumentar principalmente nuestro trafico.
Aquí podrás ver la demo, en la misma pagina:

• Síguenos en Facebook
• Síguenos en Twitter
• Síguenos en Google+
• Síguenos en Pinterest
• Suscribete vía Email

Los estilos están incorporado en un mismo código por lo que sencillamente podemos obtenerlos interceptándolo en cualquier lado, en este caso lo pegaremos en > Blogger > Diseño > Añadir un gadget > HTML/javascript y allí pega:


<style> #tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuFOgbPagVtnMb07WYajz5sX8fleKG_kzYuKyvrOfQesGnB1yaLMZJthSAmbagkUAJH308uugMGK3FxlF1jKFRpbdOVsFUMarPjWsOlCsfRk-lpPBn3XM1vxrpcmmj6YPmIcyfkqR1Q8/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbsose .icon{overflow:hidden; color:#fafafa;} #tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbsose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbsose li:hover .icon, .touch #tbsose li .icon{width:210px;} .touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbsose"> <li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/USUARIO-FACEBOOK" target='_blank'>Síguenos en Facebook</a></li> <li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/USUARIO-TWITTER">Síguenos en Twitter</a></li> <li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/ID-GOOGLE+" target='_blank'>Síguenos en Google+</a></li> <li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/USUARIO-PINTEREST" target='_blank'>Síguenos en Pinterest</a></li> <li data-alt="Suscribete vía Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" target='_blank'>Suscribete vía Email</a></li> </ul>
Con esto ya tendrás configurado e instalado este Gadget.

1. ¿Te gusto? → Síguenos en nuestra redes sociales
2. Si tienes dudas o agradecimiento, comenta.

¡Compártelo!

Tweet