---
url: "/pt/emailify/design/hover.md"
description: "Adicione estados de hover a botões e links, com notas de compatibilidade e pré-visualizações."
---

# Adicionar estados de hover

> Adicione estados de hover a botões e links, com notas de compatibilidade e pré-visualizações.

> **Warning:** **Os estilos de hover não funcionam em todos os lugares**. Atualmente, a [compatibilidade com estilos de hover nos clientes de e-mail](https://www.caniemail.com/features/css-pseudo-class-hover/) ainda é relativamente baixa. Tenha isso em mente e procure criar seus e-mails pensando nesses estilos de hover como “aprimoramento progressivo”. Se um cliente de e-mail não for compatível com estilos de hover, o estado de hover do botão simplesmente fica com a mesma aparência do estado normal quando o usuário passa o mouse sobre ele.

### Vídeo tutorial: adicionar efeitos de hover a botões em e-mails HTML do Figma

Este vídeo mostra como adicionar efeitos de hover a botões em e-mails HTML do Figma com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/8pydrphK6bU)

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

Você pode aplicar estados de hover a qualquer camada “🔗 Button” do Emailify. Selecione a camada com o painel **Settings** aberto e, na área **Button Hover State**, adicione os valores de cor em hexadecimal e/ou selecione a opção de transição animada que quer aplicar à camada de botão selecionada no hover.

Você pode definir uma ou todas as propriedades a seguir:

- Cor de fundo
- Cor do texto
- Transição

Você pode [pré-visualizar seus estados de hover](/pt/emailify/design/preview) com o recurso de pré-visualização do HTML no plugin.

## Adicionar estados de hover a links de texto e de navegação {#adding-hover-states-to-text-and-navigation-links}

### Vídeo tutorial: adicionar cores de hover a links de texto em e-mails HTML do Figma

Este vídeo mostra como adicionar cores de hover a links de texto em e-mails HTML do Figma com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/T-HSfOhTTTw)

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

Você pode aplicar estados de hover a qualquer camada “✍️ Text” ou “🍔 Navigation” do Emailify. Selecione a camada com o painel **Settings** aberto e, na área **Links Hover State**, adicione o valor de cor em hexadecimal que quer aplicar aos links de texto da camada selecionada no hover.

Você também pode ativar a opção **Fade Transition**, que adiciona uma leve transição à mudança de cor do texto do link no hover.

Você pode [pré-visualizar seus estados de hover](/pt/emailify/design/preview) com o recurso de pré-visualização do HTML no plugin.

> **Warning:** **Os estilos de hover não funcionam em todos os lugares**. Atualmente, a [compatibilidade com estilos de hover nos clientes de e-mail](https://www.caniemail.com/features/css-pseudo-class-hover/) ainda é relativamente baixa. Tenha isso em mente e procure criar seus e-mails pensando nesses estilos de hover como “aprimoramento progressivo”. Se um cliente de e-mail não for compatível com estilos de hover, o estado de hover do botão simplesmente fica com a mesma aparência do estado normal quando o usuário passa o mouse sobre ele.