Otros Botones de redes sociales con CSS

Otros Botones de redes sociales con CSS

Buenas, ahora en este tutorial, el cual les dejare botones de redes sociales con CSS, si recuerdan este mismo tema ya fue publicado en esta entrada  solo que este sera representado con otro diseño con una apariencia preciosa, los efectos son similares como un mensaje indicador al pasar el cursor sobre cada una de los iconos.

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

Pero entra en el demo y ten una visión completa sobre este y sus efectos:

DEMO

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

<style> ul#d-98pw{ margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;} ul#d-98pw li{ list-style: none;margin: 7px;padding: 0;float:left;border: none;} ul#d-98pw li a{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHL9hZr71Df0-bfE6R-ITbHuoclQhI7OpMNDO1nT6R-0cIbzqmoXJreCPmvjpgAQAVCYGG2WKAUNLG1YkMGFsKl0Hqd7xgZRu5V1ppHF9DYFIfGQt5_yjvYgpjc4rEUBfCT6gnIk-UwFei/s1600/sprite2-compartidisimo.png) no-repeat 0 0; margin:0;padding:0;display: block;position:relative; width: 33px; height: 33px; overflow: visible; } ul#d-98pw li a.twitter{ background-position: 0 0; } ul#d-98pw li a.facebook{ background-position: -33px 0; } ul#d-98pw li a.google{ background-position: -66px 0; } ul#d-98pw li a.rss{ background-position: -99px 0; } ul#d-98pw li a.twitter:hover{ background-position: 0 -33px; } ul#d-98pw li a.facebook:hover{ background-position: -33px -33px; } ul#d-98pw li a.google:hover { background-position:-66px -33px; } ul#d-98pw li a.rss:hover{ background-position:-99px -33px; } ul#d-98pw li a span{ background: #555;position:absolute; top:-10px;left:-10px;width:auto;height:auto;opacity:0; padding:3px;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#d-98pw li a:hover{text-decoration:none} ul#d-98pw li a:hover span{ opacity:.7; filter:alpha(opacity=70); top:-23px} </style>

Para finalizar el hml seria una lista similar:

<ul id="d-98pw"> <li><a class="twitter" href="#"><span>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="rss" href="#"><span>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