Como ele é
Em repouso, é uma pílula com borda fina, fundo na cor de fundo do tema e texto em seminegrito, com um pontinho de 8 pixels na cor principal à esquerda. Ao passar o mouse, o pontinho cresce como uma gota de tinta que se espalha e enche o botão inteiro; ao mesmo tempo, o texto desliza para a direita e some, e uma segunda versão dele, agora com uma seta para a direita, entra deslizando até o centro, na cor de contraste. Tudo leva 0,3 segundo e volta ao normal quando o mouse sai.
Você pode estar procurando isto se pediu algo assim
- botão que se enche de cor quando passo o mouse
- botão com uma bolinha que cresce e vira o fundo
- botão de saiba mais que mostra uma seta no hover
- efeito de botão moderno para uma chamada secundária
- botão em pílula com microanimação ao passar o mouse
- deixar o botão de ver mais com cara de site premium
Também chamado de
- interactive hover button
- botão com hover animado
- botão com seta
- fill on hover button
- botão que preenche no hover
- hover reveal button
Quando usar
- Chamadas secundárias como saiba mais, ver projeto ou falar com vendas
- Cards de serviço ou de case que levam a uma página de detalhe
- Sites institucionais que querem um detalhe de interação discreto
- Interfaces com modo claro e escuro baseadas em tokens de tema
Quando evitar
- Textos longos no botão, que não quebram linha e podem estourar a largura
- Uso principal no celular, onde o efeito de hover quase não aparece
Como pedir para a sua IA
Crie um botão em pílula com hover interativo: um ponto na cor principal cresce até preencher o botão, e o texto desliza e reaparece com uma seta. Use os tokens do meu tema, mantenha foco visível no teclado, evite texto duplicado no leitor de tela e simplifique a animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Interactive Hover Button
O Interactive Hover Button é acessível para leitor de tela?
Quase. O Interactive Hover Button usa o elemento button nativo, então funciona com Enter e espaço. Porém o texto existe em duas camadas, a normal e a do hover, e o leitor de tela pode ler o nome duas vezes. Vale pedir à IA para esconder a camada do hover da leitura e mostrar o efeito também no foco.
Dá para mudar a cor do Interactive Hover Button?
Sim. O Interactive Hover Button usa as cores do tema do projeto: o fundo vem da cor de fundo, o ponto e o preenchimento da cor principal e o texto do hover da cor de contraste dela. Trocando esses tokens, o botão muda junto, no modo claro e no escuro, sem mexer no componente.
O Interactive Hover Button funciona no celular?
O clique funciona normalmente, mas a animação do Interactive Hover Button depende do hover. No celular, o preenchimento pode aparecer só depois do toque, conforme o navegador. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP antes e depois.
