# Interactive Hover Button Botão em pílula com um ponto que cresce até preencher tudo no hover, enquanto o texto troca de lugar e ganha uma seta. > O Interactive Hover Button é um componente do THM Componentes: um botão em pílula com um ponto ao lado do texto. No hover, o ponto cresce até encher o botão com a cor principal do tema e o texto sai pela direita e volta com uma seta. Funciona no claro e no escuro e serve para chamadas secundárias. - Categoria: Botões e cursores - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/interactive-hover-button/ ## 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 ```text 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. ## Componentes relacionados - [Ripple Button](https://vibecode.thmtecnologia.com/componentes/ripple-button/): Botão que solta um círculo de cor a partir do ponto exato do clique, que cresce e some em menos de um segundo. - [Shimmer Button](https://vibecode.thmtecnologia.com/componentes/shimmer-button/): Botão preto em pílula com um feixe de luz que percorre a borda sem parar e um brilho interno que cresce no hover. - [Gradient Button](https://vibecode.thmtecnologia.com/componentes/gradient-button/): Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque. - [Rainbow Button](https://vibecode.thmtecnologia.com/componentes/rainbow-button/): Botão escuro com as cores do arco-íris correndo pela borda inferior e um reflexo colorido desfocado logo abaixo. - [Letter Swap](https://vibecode.thmtecnologia.com/componentes/letter-swap/): Ao passar o mouse, cada letra desliza na vertical e dá lugar a uma cópia, numa onda que atravessa a palavra. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.