Botones para compartir con CSS

El CSS es una de las herramientas más útiles y prácticas que podemos usar en nuestras páginas web. Nos permiten definir el aspecto de cada uno de los elementos que conforman nuestra página web. Con CSS podemos personalizar la forma de presentar márgenes, el texto, elementos individuales, alineaciones, en fin podemos modificar una infinidad de aspectos para mejorar la presentación de nuestra página web o blog.  Los botones creados con CSS, al no utilizar imágenes,  reducen la cantidad de peticiones de ficheros al servidor, esto mejora significativamente la velocidad de carga de nuestro sitio y por tanto mejora el posicionamiento web.

Para obtener botones para compartir con CSS como se muestra en la figura siguiente, debemos seguir los pasos que se enumeran a continuación.

Paso 1. Agregar un elemento HTML/javascript en la sidebar y luego pegar el siguiente código. Solo tienes que reemplazar el texto resaltado en verde con el nombre correspondiente de ID de la página de google +, página de Facebook, Usuario de Twiter y el nombre del blog.

<div class="iconos sociales">
<ul id="iconos">
    <li class="google"><a rel="author" title="También en Google+" href="https://plus.google.com/páginaGoogle">Google</a></li>
    <li class="facebook"><a title="Mi  blog en blogger en Facebook"href="http://www.facebook.com/paginaFacebook">Facebook</a></li>
    <li class="twitter"><a title="Síguenos en Twitter" href="http://twitter.com/UsuarioTwitter">Twitter</a></li>
    <li class="rss"><a title="RSS feed" href="http://NombredelBlog.blogspot.com/feeds/posts/default">RSS</a></li></ul>
</div>

Paso 2. Nos vamos a la plantilla y antes del </head> pegamos el siguientes estilo.

ul#iconos { list-style:none; padding:0 0 0 5px; margin:10px auto;  width:180px; overflow:hidden;font:0.219em/1 Arial, sans-serif;}
ul#iconos li { float:left;   width:33px;  height:33px;   margin:10px 10px 0 0; }
ul#iconos li a {display:block; width:31px; height:31px; overflow:hidden; border:1px solid #ffffff; line-height:32px; text-decoration:none;   -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
-webkit-box-shadow: -1px -1px 0px rgba(0,0,0,0.5); -moz-box-shadow: -1px -1px 0px rgba(0,0,0,0.5); box-shadow: -1px -1px 0px rgba(0,0,0,0.5);   -moz-border-radius:5px;  -webkit-border-radius:5px;  border-radius:5px; }
ul#iconos li a:hover,ul#iconos li a:focus, ul#iconos li a:active {-moz-opacity:1; filter:alpha(opacity=100); opacity:1;  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 0 0 rgba(0,0,0,0);  box-shadow: 0 0 0 rgba(0,0,0,0);}
/* Google */
.google a {position:relative;text-transform:lowercase; text-indent:6px;letter-spacing:20px;    font: 32px/22px Georgia, Times New Roman, Times, serif; line-height:22px !important;color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.google a:before {content:&quot;+&quot;;position:absolute;right:0;top:0;width:11px;text-indent:0;text-align:right;font-size:14px;color:#fff;}
.google a:hover {background:#BA4428;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Facebook */
.facebook a {position:relative;text-transform:lowercase;text-indent:17px; letter-spacing:5px;font-weight:bold; font-size:32px;line-height:33px;color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.facebook a:hover {background:#3B5998;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Twitter */
.twitter a {position:relative;text-transform:lowercase;text-indent:10px;letter-spacing:240px;    font: bold normal 30px Tahoma, sans-serif;line-height:28px;color:#ffffff;background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.twitter a:hover { color:#76DDF8;background:#daf6f7;text-shadow: 1px 1px white, -1px -1px white,2px 2px white,-2px -2px white, 3px 3px white,-3px -3px white;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Rss */
.rss a {position:relative;width:30px; padding:0 1px; text-transform:lowercase; text-indent:-93px; font-size:32px; font-weight:bold; color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.rss a:hover {background: #FD7527;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.rss a:before,
.rss a:after { content:&quot;&quot;; position:absolute; bottom:5px; left:5px;}
/* círculo */
.rss a:before {width:6px;height:6px;background:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;border-shadow: 0px 1px 0px rgba(255,255,255,0.8);}
/* 2 arcos */
.rss a:after { width:11px; height:11px; border-style:double;border-width:12px 12px 0 0; border-color:#fff; -moz-border-radius:0 25px 0 0; -webkit-border-radius:0 25px 0 0; border-radius:0 25px 0 0;}
</style>

Con esto hemos agregado los botones para compartir con CSS de Google+, Facebook, Twitter y RSS utilizando solo CSS. también puedes revisar la entrada botones para compartir en blogger o botones flotantes con sprite

Nos vemos en la próxima seorimícuaro entrada de posicionamiento web.