Botones sociales en CSS3 con efecto hover

Botones sociales con efecto hover

Hoy os traigo un interesante efecto en CSS3 para que podáis incluir en vuestra página web unos botones sociales con efecto hover de una apariencia muy profesional.

A continuación os dejo el código para implementarlo en vuestras páginas web. Como veis tendréis que copiar y pegar los códigos en sus respectivos archivos. Html en el lugar de vuestra web donde queráis que se muestre, el css en vuestra hoja de estilo (ejemplo stule.css) y en javascript para que genere el efecto desarrollado en el ejemplo.

See the Pen
SocialHover buttons
by Mohamed Abo ElGhranek (@midoghranek)
on CodePen.

Este efecto lo ha diseñado Mohamed Abo ElGhranek. Sin duda este diseñador ha conseguido un efecto que seguramente le gustarán a muchos diseñadores que lo incorporarán a su página web.

Si tenéis alguna duda o problema para implementar este código en CSS3, deja un comentario y estaré encantado de ayudarte a solucionarlo.

Te recomiendo leer  Colores en css y cómo usarlos

4 comentarios en “Botones sociales en CSS3 con efecto hover”

  1. Hola! Ante todo, muchísimas gracias por el aporte. Es muy útil! Estudié programación hace más de 15 años y estas cosillas me ayudan mucho a recordar ¡y aprender! que la programación ha ido evolucionado bastante y entre el olvido por tantos años sin programar y los cambios que veo, parece un mundo nuevo.

    Hice copia de los códigos y pega en los archivos de la web que estoy preparando, pero no sé por qué me aparecen los iconos muy pequeños, todos en color azul y sin fondo (como si fueran cada icono una imagen PNG, que al pasar el ratón por encima, cambia a un azul más oscuro), pero en sí, no me aparecen los botones bonitos.

    Seguro que será un fallo mío de lo más absurdo, pero no lo consigo ver. Si pudieras ayudarme, te estaré eternamente agradecida! Un saludo y de nuevo, muchas gracias por el aporte!

    Responder
    • Hola Alicia!

      es posible que tengas algún estilo en tu web que pueda estar generando el problema? porque es raro que al copiar y pegar todo no te funcione.

      Con cualquier cosa me comentas.

      Un saludo

      Responder

Deja un comentario

Conviértete en desarrollador web fullstack

50% de descuento!!! Código descuento:

ENTORNODEV50

  • Cursos siempre actualizados

  • Mastersclass en directo

  • Recursos para descargar

  • Foro de ayuda

  • Comunidad exclusiva en Discord

  • Certificado de estudios

entornodev-popup
Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)