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:
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.
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
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.
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.
Gracias, excelente explicación.
Ejeleeeee, eres un verdadero monstruo del diseño. Felicitaciones, se nota que has estudiado un mundo. Éxito para ti
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
Siento contestar tan tarde, prometo antes de que termine el mes, publicar lo que pides!!
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%;
}
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.
Gracias, buena explicación
Agradecido
Un genio, el que hizo esto