---
url: "/es/emailify/design/hover.md"
description: "Añade estados hover a botones y enlaces, con notas sobre la compatibilidad y vistas previas."
---

# Añadir estados hover

> Añade estados hover a botones y enlaces, con notas sobre la compatibilidad y vistas previas.

> **Warning:** **Los estilos hover no funcionan en todas partes**. Actualmente, la [compatibilidad con estilos hover en los clientes de email](https://www.caniemail.com/features/css-pseudo-class-hover/) sigue siendo relativamente baja. Tenlo en cuenta e intenta diseñar tus emails pensando en estos estilos hover como una "mejora progresiva". Si un cliente de email no admite estilos hover, el botón simplemente se verá igual que en su estado normal cuando el usuario pase el cursor por encima.

### Tutorial en vídeo: añadir efectos hover a botones en emails HTML desde Figma

En este vídeo verás cómo añadir efectos hover a los botones de emails HTML desde Figma con el plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/8pydrphK6bU)

[Video](/assets/videos/emailify/design/button-hover-state.mp4)

Puedes aplicar estados hover a cualquier capa "🔗 Button" de Emailify. Selecciona la capa con el panel **Settings** abierto y, en el apartado **Button Hover State**, añade los valores de color hexadecimales o elige la transición animada que quieras aplicar a la capa de botón seleccionada al pasar el cursor por encima.

Puedes definir cualquiera de estas propiedades, o todas:

- Background Color
- Text Color
- Transition

Puedes [previsualizar tus estados hover](/es/emailify/design/preview) con la función de vista previa del HTML del plugin.

## Añadir estados hover a enlaces de texto y de navegación {#adding-hover-states-to-text-and-navigation-links}

### Tutorial en vídeo: añadir colores hover a enlaces de texto en emails HTML desde Figma

En este vídeo verás cómo añadir colores hover a los enlaces de texto de emails HTML desde Figma con el plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/T-HSfOhTTTw)

[Video](/assets/videos/emailify/design/link-hover-color.mp4)

Puedes aplicar estados hover a cualquier capa "✍️ Text" o "🍔 Navigation" de Emailify. Selecciona la capa con el panel **Settings** abierto y, en el apartado **Links Hover State**, añade el valor de color hexadecimal que quieras aplicar a los enlaces de texto de la capa seleccionada al pasar el cursor por encima.

También puedes activar la opción **Fade Transition**, que añade una ligera transición al cambio de color del texto del enlace al pasar el cursor por encima.

Puedes [previsualizar tus estados hover](/es/emailify/design/preview) con la función de vista previa del HTML del plugin.

> **Warning:** **Los estilos hover no funcionan en todas partes**. Actualmente, la [compatibilidad con estilos hover en los clientes de email](https://www.caniemail.com/features/css-pseudo-class-hover/) sigue siendo relativamente baja. Tenlo en cuenta e intenta diseñar tus emails pensando en estos estilos hover como una "mejora progresiva". Si un cliente de email no admite estilos hover, el botón simplemente se verá igual que en su estado normal cuando el usuario pase el cursor por encima.