• +57 317 3760667
  • +57 300 2112226

Boton Redes sociales Vertical

Boton Redes sociales Vertical 1 Diseño Web IMGCreativo

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

Compartir esta Información

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp

Nuevas Entradas al Blog

Siguenos en Facebook