Botones de Redes Sociales con efectos de CSS3

En este tutorial vamos a crear una elegante botonera de redes sociales sin necesidad de utilizar imágenes, solo utilizaremos las características y efectos de  CSS3 y fonts icon de Font Awesome de Bootstrap. Esta botonera es muy fácil de hacer y támbien será útil para cualquier pagina web o blog, y lo mejor es que nos ayuda en gran manera en el tema de carga y optimización de nuestro sitio web.

Y al final este será el resultado:

Botones-Sociales-con-efectos-de-CSS3-1

Así que vamos a comenzar con el tutorial.

El HTML

Lo primero que tenemos que hacer es vincular la hoja de estilos que nos provee Font awesome en el documento HTML. Esta nos proporciona los fonts icons o fuentes iconos. Y estos son los que utilizaremos para visualizar las diferentes redes social simulando las imágenes.

Ahora si vamos con la estructura básica de la caja de iconos.

y lo que hacemos en este código HTML es básico pero que nos bastara con lo que queremos hacer. Tenemos el div contenedor de caja id=caja-redes dentro tenemos 5 enlaces que representaran los 5 iconos a esos enlaces los asociamos con 2 clases, icon-button para dar la forma al botón y el nombre de la red para aplicar un color diferente por CSS. Después tenemos la etiqueta i y la asociamos a cada clase requerida para mostrar el icono correspondiente ejemplo: para Facebook será icon-facebook, esto depende la hoja de estilos que nos provee de la fuente. Y luego con los span vacíos  vamos a lograr la animación que se hace con el efecto hover, en CSS vamos aplicar colores independiente dependiendo del color de la red social.

y si vemos el HTML sin los CSS, vamos a tener esto hasta el momento:

Botones-Sociales-con-efectos-de-CSS3-2

los iconos que llamamos por medio del HTML y su clase asociada. Ahora seguimos con los CSS.

Los CSS

Los anteriores fueron los estilos de la caja contenedora y los enlaces a la tipografía, en realidad los enlaces son los iconos, así que le damos un tamaño y las centramos.

Aplicamos los estilos al botón el fondo blanco, border radius para dar su forma, que se muestren en línea con inline-block y otros estilos para lograr la apariencia adecuada.

En el CSS anterior nos centramos en el elemento span de cada ítem, primero le damos las dimensiones para que cuadren con el botón que tenemos y lo colocamos en el centro del mismo, luego aplicamos la propiedad transition de CSS3 para que cuando haga el cambio cuando este en hover sea progresivo, acá los colocamos en cero el height y width y en el hover le damos los 3em que es el tamaño original, y de esta forma creamos la animación del estado hover. Y luego nos enfocamos a cada red social individualmente para aplicar un color diferente de fondo por medio del span en el estado hover.

en el código anterior aplicamos estilos a elemento i que es el que contiene la fuente, y luego damos color a cada fuente individualmente dependiendo su color de red social. Y por ultimo le aplicamos un color blanco a la fuente en su estado hover.

Y con esto terminamos este ejercicio que espero que te sea de utilidad. Nos vemos el próximo tutorial.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

11 Respuestas

  1. Jorge dice:

    Hola Johanso, me gusta esta plantilla una barbaridad “3 – Golden Flat Responsive Template”, pero le encuentro que me gustaría que las imágenes del portfolio al hacer click linken en una galería pop up estilo estas que se abren elegantemente y puedes pasar con flechas las imágenes que contengan, viendo la demo es una pena que no esté programado eso. Como lo puedo ampliar?. El script que tienes para esto es: Print Design

    Poster
    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
    Read More

    Un saludo

    • Johanso dice:

      Hola Jorge, hay muchos plugins que hacen esto, los mejores en mi concepto son: prettyPhoto, Colorbox, fancybox.. etc. implementarlo es muy facíl.

  2. juniors dice:

    Duda.. como agrego imagenes , es decir la imagen del botn de YOUTUBE POR EJEMPLO?. gracias de antemano

  3. anibal dice:

    Hola amigo, hice todos los pasos pero cuando lleno los campos del formulario y le doy enviar. sale de la pagina y solo se queda en /contacto/prose-form.php y la pagina en blanco. y no llega al correo el formulario. Necesito Ayudaaa

  4. Thomas dice:

    Duda :O Para agregar la dirección web destino en el botón, basta con poner la url dentro del href=” ”
    no me direcciona.

  5. coko dice:

    Se podría incluir más iconos de redes sociales tipo: Instagram, youtube, ect…

    Gracias por el tuto!!!!

  1. febrero 13, 2014

    Claro, los que quieras.. el tutorial es solo un ejemplo de como hacerlo.