Generador de efectos hover CSS
Explora una galería en vivo de efectos hover para botones, enlaces de texto e imágenes. Pasa el cursor por una tarjeta para probarlo, personaliza los colores, los tiempos y el easing, y copia HTML y CSS ligeros con compatibilidad integrada con el foco del teclado y el movimiento reducido.
Última actualización:
Pasa el cursor (o tabula) por cualquier tarjeta para probar el efecto y luego haz clic en Personalizar.
Efecto
Cómo usar Generador de efectos hover CSS
- Elige Botones, Enlaces o Imágenes arriba.
- Pasa el cursor por las tarjetas de la galería y haz clic en Personalizar en la que te guste.
- Ajusta los colores, la duración, el easing y el radio de las esquinas; cambia el texto del botón, del enlace o del pie de foto.
- Marca Mostrar estado hover para congelar el efecto en su aspecto final mientras lo ajustas.
- Copia el CSS y el HTML, o descarga una página de demostración para probarlo por separado.
Cómo funcionan los efectos hover CSS
Un efecto hover es un par de estados más una transición entre ellos:
.hover-lift {
transition: transform 300ms ease, box-shadow 300ms ease;
}
.hover-lift:hover,
.hover-lift:focus-visible {
transform: translateY(-3px);
box-shadow: 0 10px 20px -8px rgba(47, 107, 79, 0.7);
}La propiedad transition indica qué propiedades se animan, cuánto tardan y con qué curva de easing. Los efectos que muestran un relleno o un destello usan un pseudoelemento (::before o ::after) que se mueve o escala con transform, mientras el botón mantiene overflow: hidden para que la capa extra quede dentro de sus esquinas.
Curvas de easing de un vistazo
| Easing | Movimiento | Úsala para |
|---|---|---|
ease | Inicio rápido, final suave (el valor por defecto del navegador) | Casi cualquier cosa |
ease-out | Inicio rápido, frena al final | Elementos que responden al puntero, rellenos, subrayados |
ease-in-out | Inicio y final lentos | Movimientos más largos como el zoom de imágenes |
linear | Velocidad constante | Cambios de color, destellos |
cubic-bezier(.34,1.56,.64,1) | Se pasa un poco y luego se asienta | Efectos lúdicos de crecimiento y flecha |
cubic-bezier(.22,1,.36,1) | Desaceleración muy suave | Elevaciones y deslizamientos con sensación premium |
Consejos para buenos efectos hover
- Usa un efecto claro por elemento. Combinar una elevación, un cambio de color y un destello en el mismo botón suele resultar recargado.
- Mantén el mismo efecto para el mismo tipo de elemento en todo tu sitio para que los visitantes aprendan qué se puede pulsar.
- Comprueba el contraste de ambos estados: un efecto de relleno cambia el color del texto, así que prueba también los colores en hover.
- No ocultes información importante solo tras el hover; los dispositivos táctiles no pueden hacer hover.
- Añade
will-change: transformsolo si un efecto va a tirones, no a todos los elementos.
Preguntas frecuentes
¿Cómo añado un efecto hover en CSS?
Escribe el estilo normal del elemento, añade una transición para las propiedades que cambian (por ejemplo transition: transform 300ms ease) y luego escribe una regla :hover con los nuevos valores. El navegador anima el paso entre los dos estados. El generador produce exactamente esta estructura.
¿Qué propiedades CSS conviene animar en hover?
transform y opacity son las más fluidas porque los navegadores pueden animarlas en la GPU sin recalcular el diseño. Los colores, box-shadow y background-position funcionan bien en elementos pequeños. Evita animar width, height, margin o top, que obligan a recalcular el diseño en cada fotograma.
¿Cuál es una buena duración para una transición hover?
La mayoría de los efectos hover de interfaz se sienten bien entre 150 y 400 milisegundos. Más corto se siente instantáneo y ágil; más largo se siente suave, pero puede parecer lento en los botones. Los movimientos más grandes, como el zoom de una imagen, pueden durar de 400 a 700 milisegundos.
¿Por qué el código incluye :focus-visible?
Quienes navegan con el teclado nunca pasan el cursor por encima. Aplicar el mismo estilo en :focus-visible les muestra el efecto cuando tabulan hasta el botón o el enlace, lo que además es un requisito de accesibilidad para el foco visible.
¿Funcionan los efectos hover en los teléfonos?
Las pantallas táctiles no tienen hover real. Los navegadores móviles suelen aplicar :hover brevemente al tocar, así que el efecto debe ser un extra, nunca la única forma de mostrar contenido. Para los pies de foto superpuestos, considera mostrarlos por defecto en pantallas pequeñas.
¿Qué hace la opción de movimiento reducido?
Añade un bloque @media (prefers-reduced-motion: reduce) que desactiva las transiciones para los visitantes que pidieron a su sistema operativo minimizar las animaciones. El estilo hover sigue cambiando, solo que sin movimiento.
¿Puedo combinar dos efectos hover?
Sí, siempre que cambien propiedades distintas. Por ejemplo, el efecto de elevación (transform, box-shadow) funciona con contorno a sólido (background, color). Une las listas de transiciones en una sola declaración transition, porque una segunda línea transition reemplaza a la primera.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.