Botones de redes sociales CSS

Botones de redes sociales CSS

Buenas, ahora en este tutorial, el cual les dejare botones de redes sociales con CSS, con una apariencia preciosa, con variedad de efectos al pasar el cursor sobre este y con un mensaje indicador, esta muy bueno!.

Comencemos con pasos sencillo se logra este, se ve así

Pero entra en el demo ve su funcionamiento, sus  efectos:

DEMO

Ok, para lograrlo aquí están los estilos CSS:

<style> ul#m-soc{margin: 18px 0 0 10px;padding: 0;width: 280px;height: 66px;} ul#m-soc:hover li {opacity:0.6;}ul#m-soc li {list-style: none;margin: 4px;padding: 0;float: left;border: none;} ul#m-soc li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ks3ryVFJLk4X4tweTGdrkyuvvImq7hwFx01C3d68tZdnSBOfTj8CI0h3EcoBaiBJNRBp4cYlKvdVWAUbekzaYcbBwvNtgnPZDhdedgo1RlNchWoJqG-5mdS22apr5ntcGn9r79DXEyyK/s1600/sprite1-compartidisimo.png) no-repeat 0 0; margin: 0;padding:0;display: block;position:relative;width: 48px;height: 48px;overflow: visible;}ul#m-soc li a.twitter{background-position: 0 0;} ul#m-soc li a.facebook{background-position: -48px 0;} ul#m-soc li a.google{background-position: -96px 0;} ul#m-soc li a.youtube{ background-position: -144px 0;} ul#m-soc li a.rss { background-position: -192px 0;} ul#m-soc li a span{background: #555;position:absolute;top:-10px;left:0;width:auto;height:auto;opacity:0;padding:5px;text-align:left;color:#fff;filter:alpha(opacity=0);white-space:nowrap;border-radius:3px;font-size:12px;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}ul#m-soc li:hover{opacity:1} ul#m-soc li a:hover{text-decoration:none}ul#m-soc li a:hover span{ opacity:.8;filter:alpha(opacity=80);top:-23px}</style>

Para finalizar, el HTML seria una lista así:

<ul id="m-soc"> <li><a class="twitter" href="#"><span>Seguir en Twitter</span></a></li> <li><a class="facebook" href="#"><span>Facebook</span></a></li> <li><a class="google" href="#"><span>Google+</span></a></li> <li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li> <li><a class="rss" href="#"><span style="border:0;">Suscríbete</span></a></li> </ul>

1.  ¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 
2. Comentar es Agradecer.

¡Compártelo!

Tweet