Saltar al contenido
TutoEspacio

Botones de Redes Sociales con efectos CSS3

botonera redes sociales efecto css3

En el siguiente tutorial vamos a crear una bonita y elegante botonera de todas nuestras redes sociales; esta vez no utilizaremos imĂĄgenes, sino que mĂĄs bien utilizaremos las herramienta, caracterĂ­stica y efectos CSS3. En lo personal me agrada mucho esta botonera o contenedor ya que hace ver tu blog bonito y agradable. Como mencione no vamos hacer uso de imĂĄgenes asĂ­ que haremos uso de los iconos de Font Awesome Bootstrap.

Ahora si vamos a comenzar con el tutorial para poder poner esta bonita botonera de redes sociales.

Lo primero que debes hacer es agregar la hoja de estilos que nos proporciona las Font Awesome Bootstrap en el documento HTML. Estos estilos nos proporcionan las fonts e iconos que nos ayudarĂĄ a visualizar las imĂĄgenes de nuestras redes sociales.

Nos vamos a nuestro blog, despues a la siguiente ruta: Plantilla – Editar HTML. Ya estando aquĂ­ presiona Ctrl + F y buscamos <head>, pega el siguiente cĂłdigo despues de esa etiqueta.

<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css”/>

Ahora vamos a definir los estilos CSS, en el cual como primer paso se definirån los estilos para la caja contenedora y los enlaces a la tipografía. En este caso a los iconos, así que le damos el tamaño y lo centramos. Después aplicamos los estilos al boton de fondo blanco, border radius para dar forma redonda y otros estilos para lograr su forma adecuada.

Copiamos el siguiente cĂłdigo CSS y lo pegamos antes de ]]></b:skin> .

.caja-redes {
    margin: 0 auto;
    padding: 15px;
    position: relative;
    width: 400px;
}
.caja-redes a {
    text-align: center;
    font-size: 20px;
}
.icon-button {
    background-color: white;
    border-radius: 3em;
    cursor: pointer;
    display: inline-block;
    height: 3em;
    line-height: 3em;
    margin: 0 8px;
    position: relative;
    width: 3em;
}
.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 0;
}
.icon-button:hover span {
    width: 3em;
    height: 3em;
    border-radius: 3em;
    margin: -1.5em;
}
.linkedin span {
    background-color: #4393BB;
}
.pinterest span {
    background-color: #C92228;
}
.twitter span {
    background-color: #4099ff;
}
.facebook span {
    background-color: #3B5998;
}
.google-plus span {
    background-color: #db5a3c;
}.icon-button i {
    background: none;
    color: white;
    left: 0;
    line-height: 3em;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 3em;
    z-index: 2;
}
.icon-button .icon-linkedin {
    color: #4393BB;
}
.icon-button .icon-pinterest {
    color: #C92228;
}
.icon-button .icon-twitter {
    color: #4099ff;
}
.icon-button .icon-facebook {
    color: #3B5998;
}
.icon-button .icon-google-plus {
    color: #db5a3c;
}
.icon-button:hover .icon-linkedin, .icon-button:hover .icon-pinterest, .icon-button:hover .icon-twitter, .icon-button:hover .icon-facebook, .icon-button:hover .icon-google-plus {
    color: white;
}

Con todo lo que hemos hecho anteriormente agregamos las fonts y los estilos CSS, ahora lo que resta es colocar el siguiente cĂłdigo donde tu quieras dentro de tu plantilla.

<div class=”caja-redes”>
<a href=”#” class=”icon-button linkedin”><i class=”icon-linkedin”></i><span></span></a>
<a href=”#” class=”icon-button pinterest”><i class=”icon-pinterest”></i><span></span></a>
<a href=”#” class=”icon-button twitter”><i class=”icon-twitter”></i><span></span></a>
<a href=”#” class=”icon-button facebook”><i class=”icon-facebook”></i><span></span></a>
<a href=”#” class=”icon-button google-plus”><i class=”icon-google-plus”></i><span></span></a>
</div>

Sustituimos el # por la url de cada una de nuestras redes sociales. Ejemplo:

<a href=”https://plus.google.com/u/0/+TutoEspacio” class=”icon-button google-plus”><i class=”icon-google-plus”></i><span></span></a>

Puedes ver como se ve en este blog de pruebas

Espero que este tutorial haya sido de tu agrado y si te sirvio no olvides compartir que nos ayuda de mucho. Visita nuestro Canal en Youtube y Suscribete!.De igual forma puedes dejar tu comentario por si tienes dudas.

No olvides seguir visitando TutoEspacio.