CSS :hover — no es un efecto, es un arma. Aprende a usarla

:hover no es un efecto visual simpático de CSS. Es un contrato silencioso: cuando el usuario toca algo, la interfaz responde.
El problema es que la mayoría de diseñadores lo tratan como maquillaje barato. Cambian colores al azar, meten sombras sin pensar y rompen la coherencia de la marca.
Este artículo es un manifiesto para desmontar esa mentira y enseñarte cómo usar :hover como una herramienta estratégica.

Acto I: Autopsia de un crimen: La mentira del hover mediocre

Dogma reproducido:
“El hover sirve para poner bonito un botón, nada más”.

Autopsia:
Un ecommerce donde el mismo botón cambia de color distinto en home, checkout y perfil. El usuario duda: “¿esto es el mismo botón o no?”.
Causa: hovers improvisados, sin tokens ni guía. Consecuencia: incoherencia → desconfianza → menos ventas.

Evidencia mínima:
3 horas de QA por sprint, +8KB CSS duplicado, -7% de conversión.

Smells — síntomas de hover mal usado:

• Botones que no reaccionan igual en toda la web
• Animaciones largas que parecen glitch
• Hover que oculta o mueve contenido (el infierno del layout shift)

Contraejemplo rápido:

Antes — cada sección con un hover distinto:

CSS
.btn-home:hover { background: blue; }
.btn-checkout:hover { background: green; }

Después — un token coherente para toda la interfaz:

CSS
/* Token semántico: un único color de hover */
.btn:hover { 
  background: var(--btn-hover-bg); 
}

Explicación:
Antes, cada botón tenía un hover “a su bola”. Después, todos heredan de --btn-hover-bg. Esto reduce inconsistencias y hace que la marca hable con una sola voz.

Acto II — La verdad: tácticas de hover con intención

Visión:
El hover no es decoración: es feedback inmediato. Es el apretón de manos digital entre usuario y sistema.

Modelo operativo:
Input → intención → estado visual → confirmación → siguiente acción.
El hover está justo en el momento de confirmación: “sí, esto responde a tu intención”.

Táctica 1 — botones coherentes

Definir tokens globales y transiciones predecibles:

CSS
:root { 
  --btn-bg: #222; 
  --btn-hover-bg: #3498db; 
  --btn-text: #fff; 
}

.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 12px 24px;
  border: none;
  transition: background 0.2s ease;
}

.btn:hover, .btn:focus-visible {
  background: var(--btn-hover-bg);
}

Explicación:
El botón cambia de color con suavidad al pasar el ratón (:hover) o al navegar con teclado (:focus-visible).
La transición de 0.2s asegura que no sea brusco ni lento.

Demo:
Comprar ahora

Táctica 2 — enlaces claros

Un enlace debe confirmar que es clicable. No con un arcoíris, sino con un subrayado simple y consistente:

CSS
a.link {
  color: #3498db;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}

a.link:hover, a.link:focus-visible {
  text-decoration: underline;
}

Explicación:
El usuario ve claramente que es un enlace clicable, sin perder consistencia visual. En móviles y teclado, el :focus-visible garantiza accesibilidad.

Demo:
Ir a mi perfil

Táctica 3 — tarjetas con profundidad

Usar sombras para crear jerarquía y feedback:

CSS
.card {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Explicación:
La tarjeta se “eleva” al pasar el ratón, como si flotara. Indica que es un bloque interactivo y capta la atención del usuario.

Demo:

Acto III — La nueva doctrina: el manifiesto de un hover que no falla

Principios no negociables:

• Hover siempre significa acción, no decoración
• Unifica tokens de color y transición
• No más de 2 propiedades animadas a la vez
• Velocidad humana: ≤300ms
• Fallback en teclado y móvil
• Jamás !important en estados

Definición de hecho:

• Todos los hovers funcionan con ratón y teclado
• Accesibles en contraste y foco
• Tokens centralizados en :root
• Documentados en la guía de estilos

Métricas de guardarraíl:

• Especificidad hover ≤ 0-1-1
• Duración ≤ 300ms
• CSS de estados ≤ 15% del total

Plan de acción en 24h:

• Auditar hovers incoherentes
• Crear tokens globales
• Eliminar !important
• Testear en móvil y teclado
• Documentar en el repo

Si tu hover es débil, tu sistema es débil.
Si tu hover es coherente, tu producto respira y responde.
Ahí está la diferencia entre una interfaz que se usa… y una que se abandona.

Preguntas frecuentes sobre CSS :hover

¿Qué opinas de CSS :hover?

:hover no es una «opinión». No es un «recurso». :hover es el apretón de manos de tu interfaz. Es la primera palabra que cruzas con el usuario. Es el momento exacto en el que dejas de ser un monólogo y te conviertes en una conversación. Y, como en la vida real, por ese apretón de manos se sabe si estás tratando con un profesional con confianza o con un mediocre con la mano sudorosa.

El 99% de las webs que ves ahí fuera tienen un apretón de manos de mierda.

El «caneo» de hoy: La autopsia del apretón de manos de un mediocre

¿Por qué la mayoría lo usa como el culo? Porque cometen uno de estos cuatro crímenes capitales:

• El blandengue (El transition: all 0.3s ease;): Es el apretón de manos del oficinista aburrido. Lento, predecible, sin energía. Es el «hola, existo, pero no me importas una mierda». Lo ponen en todas partes porque lo copiaron de un tutorial en 2012. Es la definición de pereza.
• El payaso (El transform: scale(1.2) rotate(15deg);): Es el apretón de manos del comercial desesperado. El que te agarra, te sacude el brazo y te grita en la cara. Un botón que se agranda, gira y cambia a siete colores. No es «llamativo», es un puto insulto a la inteligencia del usuario. Grita «¡no tengo nada interesante que decir, así que mira cómo me muevo!».
• El fantasma (Sin :hover): Es el peor de todos. Es el que te deja con la mano extendida. Pasas el ratón por encima de un enlace y… nada. Silencio. Es una falta de respeto. Es decirle al usuario: «tu intención de interactuar conmigo me la suda».
• El mentiroso (El cursor: pointer en un no-enlace): Es el apretón de manos del timador. Un texto que parece un botón, con su manita y su cambio de color, pero que no hace una puta mierda cuando haces clic. Es engañar al usuario. Es quemar la confianza para nada.

¿Significa esto que el :hover es una mierda?

No. Significa que es el  primer test de calidad de tu interfaz. Un «no medianía» entiende que :hover no es decoración. Es feedback. Es una promesa. Un «no medianía» usa el :hover con la precisión de un cirujano:

• Es una conversación, no un grito: El :hover debe ser una reacción sutil pero inequívoca. Un ligero cambio de brillo, un subrayado que aparece con la velocidad de un latigazo, un transform: translateY(-2px) que le da al botón una sensación de estar «listo para ser pulsado». Es el «te he visto, sé lo que quieres» de un profesional.
• Refuerza la acción: El :hover debe dar una pista de lo que va a pasar. Un botón de «borrar» puede adquirir un sutil borde rojo. Un enlace de «descargar» puede mostrar un pequeño icono de flecha. Prepara al usuario para la consecuencia de su acción.
• El rendimiento no se negocia: Un profesional anima transform y opacity, que son baratos para la CPU. Nunca anima width, height o margin, que provocan un puto terremoto en el renderizado de la página. Un :hover que provoca «lag» es una chapuza.
• Tiene un hermano gemelo: Lo que haces para el ratón (:hover), lo haces para el teclado. Su hermano gemelo, :focus-visible, debe ser igual de claro, igual de potente. Ignorarlo no es un descuido, es una puta falta de respeto a la accesibilidad.

La Sentencia

Así que no,  no tengo una «opinión» sobre :hover. Tengo una puta doctrina. :hover no es un efecto. Es el primer apretón de manos. Y si el tuyo es débil, mentiroso o inexistente, ya me has dicho todo lo que necesito saber sobre ti y sobre la mierda de web que has construido.