Mundo Web

Botones y efectos hover CSS

Por 28/07/2016 enero 16th, 2017 5 Comentarios

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 5 Comentarios

  • 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.

Responder a Daniel Cancelar comentario