Botones sociales en CSS con efecto

Hoy hemos llegado de nuevo con otro widget blogger. En esta oportunidad se trata de la versión actualizada de "Pure CSS Stylist Smooth Social Button Widget " un artilugio que queda muy bien en las barras laterales.

En http://www.newbloggertips.com su diseñador Ashu Insan nos provee de un instalador automático, así que si te resulta complicado lo que voy a explicar, simplemente puedes visitar su página y usar su instalador.

Este es uno de sus widget favorito. porque cuenta con varios plugins sociales para seguimiento para tu blog o Web site. Sin embargo, algunos plugins utilizan javascript y puede afectar o ralentizar la carga de tu blog o sitio web . Por lo tanto, ha decidido crear este impresionante widget con puro CSS.

Este widget es ideal para conseguir que tus lectores participen en tus redes sociales y, obviamente, aumentará tu reputación social y el nombre de tu marca.

Además, este widget se ve limpio y ordenado en la barra lateral o en cualquier otro lugar con un sexy efecto hover cuando el lector intenta hacer clic en el botón.

Incluye el siguiente código en un elemento HTML/JAVA.

<style> #NBT-SNS { width: 260px; margin: 5px 20px; padding:5px; } #NBT-SNS li { cursor: pointer; height: 48px; position: relative; list-style-type: none; } #NBT-SNS .icon { background: #D91E76 url('http://2.bp.blogspot.com/-Wh9jq4HrRN0/UOmHSqZDWDI/AAAAAAAAJVM/5fY5LrICi6c/s1600/NBT-Social_Button.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42); border-radius: 30px; display: block; color: #141414; float:none; height: 48px; line-height: 48px; margin: 5px 0; position: relative; text-align: left; text-indent: 90px; text-shadow: #333 0 1px 0; white-space: nowrap; width: 48px; z-index: 5; -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; -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; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none; } #NBT-SNS span:hover { visibility: hidden; } #NBT-SNS span { display: block; top: 15px; position: absolute; left: 90px; } #NBT-SNS .icon { color: #fafafa; overflow: hidden; } #NBT-SNS .fb { background-color: rgba(45, 118, 185, .42); background-position: 0 -382px; } #NBT-SNS .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px; } #NBT-SNS .google { background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42); background-position: 0 -526px; } #NBT-SNS .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px; } #NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px; } #NBT-SNS .rss { background-color: rgba(255, 109, 0, .42); background-position: 0 -718px; } #NBT-SNS li:hover .icon { width: 250px; } #NBT-SNS li:hover .icon {background-color: #d91e76; } #NBT-SNS li:hover .fb {background-color: #2d76b9; background-position: 0 2px; } #NBT-SNS li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #NBT-SNS li:hover .google {background-color: #A70000; background-position: 0 -94px; } #NBT-SNS li:hover .pint {background-color: #C00; background-position: 0 -142px; } #NBT-SNS li:hover .linked { background-color: #005772; background-position: 0 -190px; } #NBT-SNS li:hover .ytube {background-color: #A00; background-position: 0 -286px; } #NBT-SNS li:hover .rss {background-color: #EC5601; background-position: 0 -334px; } #NBT-SNS .icon:active { bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none; -o-box-shadow: none; } </style> <ul id="NBT-SNS"> <li><a href="http://www.facebook.com/149021465232802" class="icon fb">Siganos en Facebook</a><span>Siganos en Facebook</span> </li> <li><a href="https://twitter.com/GrupoDLYC" class="icon twit">Siganos en Twitter</a><span>Siganos en Twitter</span> </li> <li><a href="https://plus.google.com/106558400164530258627" class="icon google">Siganos en Google+</a><span>Siganos en Google+</span> </li> <li><a href="http://www.pinterest.com/Pinchothebest" class="icon pint">Siganos en Pinterest</a><span>Siganos en Pinterest</span> </li> <li><a href="http://in.linkedin.com/pub/orlando-daniel-pin/30/b81/a8/" class="icon linked">Siganos en LinkedIn</a><span>Siganos en LinkedIn</span> </li> <li><a href="http://www.youtube.com/user/Pinchotheone" class="icon ytube">Siganos en Youtube</a><span>Siganos en Youtube</span> </li> <li><a href="http://feeds.feedburner.com/blogspot/otHSh" class="icon rss">Suscriba via RSS</a><span>Suscriba via RSS</span></li> </ul> <div style='clear: both;'> </div>
Deberás cambiar la dirección de cada servicio por el que corresponde a tu propio perfil.

 <li><a href="http://www.facebook.com/149021465232802" class="icon fb">Siganos en Facebook</a><span>Siganos en Facebook</span> </li>
<li><a href="https://twitter.com/GrupoDLYC" class="icon twit">Siganos en Twitter</a><span>Siganos en Twitter</span> </li>
<li><a href="https://plus.google.com/106558400164530258627" class="icon google">Siganos en Google+</a><span>Siganos en Google+</span> </li>
<li><a href="http://www.pinterest.com/Pinchothebest" class="icon pint">Siganos en Pinterest</a><span>Siganos en Pinterest</span> </li>
<li><a href="http://in.linkedin.com/pub/orlando-daniel-pin/30/b81/a8/" class="icon linked">Siganos en LinkedIn</a><span>Siganos en LinkedIn</span> </li>
<li><a href="http://www.youtube.com/user/Pinchotheone" class="icon ytube">Siganos en Youtube</a><span>Siganos en Youtube</span> </li>
<li><a href="http://feeds.feedburner.com/blogspot/otHSh" class="icon rss">Suscriba via RSS</a><span>Suscriba via RSS</span></li>