Iconos sociales con efecto 3D

Para instalar estos iconos sociales con efecto 3d, asemejan unos botones que se quedan pulsados. Solo debes añadir un elemento HTML a tu plantilla e incrustar el código que hay debajo. No olvides rellenar las urls de tu feed y redes sociales en el código (negrita)

<style type="text/css">
/* Iconos Sociales */
.social-ico {width: 300px;}
.social-rss, .social-twitter, .social-facebook, .social-google{ background: url(http://2.bp.blogspot.com/-qzZihesZzUU/T1ZZjqN73xI/AAAAAAAAUAg/xg44SrKF8MQ/s0/socialico.png) no-repeat top left; }
.social-facebook{ background-position: 0 0; width: 64px; height: 64px; float:left;}
.social-facebook:active{ background-position: -74px 0; width: 64px; height: 64px;}
.social-facebook:hover{ background-position: -74px 0; width: 64px; height: 64px;}
.social-google{ background-position: -148px 0; width: 64px; height: 64px;float:left;}
.social-google:active{ background-position: -222px 0; width: 64px; height: 64px;}
.social-google:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.social-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;}
.social-rss:active{ background-position: -370px 0; width: 64px; height: 64px;}
.social-rss:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.social-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.social-twitter:active{ background-position: -518px 0; width: 64px; height: 64px;}
.social-twitter:hover{ background-position: -518px 0; width: 64px; height: 64px;}
</style>
<div class="social-ico">
<a href="URL DE TU FEED" target="_blank" title="Suscribete y no te pierdas nuestros articulos!!!" rel="nofollow"><span class="social-rss"></span></a> <a href="URL DE TWITTER" target="_blank" title="Síguenos en Twitter, interactuar es facil" rel="nofollow"><span class="social-twitter"></span></a> <a href="URL DE FACEBOOK" target="_blank" title="Síguenos en Facebook" rel="nofollow"><span class="social-facebook"></span></a> <a href="URL DE GOOGLE PLUS" target="_blank" title="Síguenos en Google+" rel="nofollow"><span class="social-google"></span></a>
</div>

Iconos creados por Land of Web para uso personal y comercial.

Autor: Carlos Pizcos . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

+ Diseño-web