Skip to main content
Mundo Web

Botones y efectos hover CSS

By 28/07/2016enero 16th, 201715 Comments

Iba a colgar esta pequeña colección de efectos hover para botones como siempre, en plan de estar por casa, pero he encontrado algo que es genial para cualquier front-end developer, con el fin de ir probando código de forma rápida y sencilla y además con la posibilidad de poder ir guardándolo.

Se llama codepen y puedes visitar su web aquí.

La cuenta gratuita tiene un inconveniente, que todo el código que generes será público, pero vamos que a mi, como sabéis, me da igual, más público que iba a ser en mi blog… bueno, en definitiva, que me ha encantado y que lo usaré de aquí en adelante.

Comparto 5 efectos hover para dar estilo a tus botones:

  • Efecto relleno por capa superpuesta horizontal
  • Efecto relleno por superposición de capa vertical
  • Relleno de color gradual
  • Efecto resplandor simple
  • Efecto resplandor agresivo

Os dejo a través del siguiente embed los efectos css prometidos.

See the Pen Hover Effect by Daniel Villalba (@danielvillalba) on CodePen.dark

Si lo prefieres, puedes descargar un .zip con los archivos del proyecto por separado:

Descargar zip

Join the discussion 15 Comments

  • Daniel dice:

    Muchas gracias por la forma en la que explica el proceso de creación de los botones en html y css. Me fue de mucha ayuda y por cierto su pagina web y blog es muy elegante, dinámico, muy creativo y muy completo en información.
    Si tuviese canal de youtube usted tendría muchos suscriptores son muy pocas las personas que explican todo con tanto detalle como usted, a por cierto el efecto que tiene el nombre de agencia Brain es muy cool.
    Éxitos gracias por la ayuda.

  • esteban dice:

    como hago para que el botón funcione y me lleve a otro vinculo?

    • Hola Esteban, por ejemplo, puedes englobar el botón entre etiquetas

      <a href="tu_enlace" rel="nofollow">código del botón</a>

      o controlar el evento click sobre el mismo con JavaScript, si necesitas más ayuda con ello no dudes en pedirla. Gracias por comentar. Un saludo.

  • Luara dice:

    Como puedo agragarle una imagen al boton y que tambien se haga hover

    • Hola Laura, para incluir una imagen tienes varias opciones, puedes incluirla desde css con el pseudo-elemento ::before o ::after o bien como un elemento html usando la etiqueta img dentro de la etiqueta span (aunque en este artículo esté así, lo apropiado para esto sería una etiqueta button).

      Si necesitas ayuda no dudes en colgar tu código, junto con la url de la imagen que querrías integrar y en cuanto tenga un hueco te lo explico en el contexto adecuado.

  • Ariel dice:

    Gracias, excelente explicación.

  • José Andelfo Cordero Buitrago dice:

    Ejeleeeee, eres un verdadero monstruo del diseño. Felicitaciones, se nota que has estudiado un mundo. Éxito para ti

  • Mcfly dice:

    Tengo la misma pregunta de Laura… intento hacer que una imagen con dirección web, tenga el efecto hover de resplandor y no me sale T_T

  • Xavy dice:

    lo monto y me carga en web pc, pero en web movil no, es posible editarlo para que cargue tipo responsive xfa?

    • Hola Xavy, en mobile no existe hover, pero si quieres puedes hacerlo con el estado :focus, solo tendrías que sustituir los :hover por :focus

      Espero te sirva. Saludos!

      • Disculpa que vuelva a escribir, si lo que quieres es que sea responsive, no es sustituir, sino añadirlo, de esta manera funcionaría:

        .boton:hover::before, .boton:focus::before {
        width: 100%;
        }

  • Martín dice:

    Hola, muy buenos los estilos, pero sabes que tengo un problema,

    cuando creo el link funciona sin problemas, pero al aplicar el estilo el fondo se sobrepone sobre el link y si bien se ve perfecto tapa el enlace y no se puede hacer clic en el botón.

    en particular estoy usando el estilo 1, pero no se como hacer para se pueda ver el efecto y a la vez cliquear el botón, sin que el fondo corredizo se sobreponga al enlace y evite hacer clic en el mismo.

    (link en campo sitio web)

    Gracias.

  • Daniela Suárez dice:

    Gracias, buena explicación

  • cris dice:

    Agradecido

Leave a Reply to Luara Cancel Reply