Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase, pero mejor veamoslo en el código que es mas sencillo entenderlo asi.
<div class="social">
<ul>
<li>
<a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a>
</li>
<li>
<a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a>
</li>
<li>
<a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a>
</li>
<li>
<a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a>
</li>
<li>
<a href="mailto:[email protected]" class="icon-mail"></a>
</li>
</ul>
</div>
Aquí hay varias cosas de que hablar, la primera es que he puesto el atributo target=”_blank” para que cuando el usuario acceda al link este se abra en una nueva pestaña y asi no abandone tu sitio, muchas personas no lo recomiendan pero todo el mundo lo hace.
Pasemos con el código CSS:
.social {
position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
left: 0; /* Establecemos la barra en la izquierda */
top: 200px; /* Bajamos la barra 200px de arriba a abajo */
z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
.social ul {
list-style: none;
}
.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}
.social ul li a:hover {
background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}
En el código anterior he puesto comentarios explicando mas claramente para que usamos cada propiedad, pero en resumen lo que hicimos fue establecer una posición fija para la barra con position:fixed; También le dimos a cada elemento a un estilo de botón, le agregamos animaciones e hicimos que cuando el usuario pasara el mouse incrementara el espacio interior del botón y el color de fondo.
Con esto ya lo tendríamos, cabe aclarar una cosa y es que esta barra no funciona si la deseas posicionar a la derecha, puedes quitar left:0; y poner right:0; esto la moverá a la derecha, pero al pasar el mouse tendrás un error, si quieres tenerla a la derecha tendrás que quitarle el padding al hover.
Referencia Falconmasters
