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=鈥漵tylesheet鈥 href=鈥漢ttp://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=鈥漜aja-redes鈥>
<a href=鈥#鈥 class=鈥漣con-button linkedin鈥><i class=鈥漣con-linkedin鈥></i><span></span></a>
<a href=鈥#鈥 class=鈥漣con-button pinterest鈥><i class=鈥漣con-pinterest鈥></i><span></span></a>
<a href=鈥#鈥 class=鈥漣con-button twitter鈥><i class=鈥漣con-twitter鈥></i><span></span></a>
<a href=鈥#鈥 class=鈥漣con-button facebook鈥><i class=鈥漣con-facebook鈥></i><span></span></a>
<a href=鈥#鈥 class=鈥漣con-button google-plus鈥><i class=鈥漣con-google-plus鈥></i><span></span></a>
</div>

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

<a href=鈥漢ttps://plus.google.com/u/0/+TutoEspacio鈥 class=鈥漣con-button google-plus鈥><i class=鈥漣con-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.