Como ele é
Imagine a luz de um farol passando pela borda de uma pedra polida. O botão tem formato de pílula, fundo preto, texto branco e uma borda branca quase transparente. Um feixe de luz branca, desfocado, gira e desliza de um lado a outro, indo e voltando a cada 3 segundos, e só aparece numa faixa fina junto à borda, como um reflexo correndo pelo contorno. Na base interna há um brilho suave que se intensifica ao passar o mouse; ao clicar, o botão desce um pixel, como uma tecla.
Você pode estar procurando isto se pediu algo assim
- botão com brilho passando por ele
- botão preto com uma luz correndo pela borda
- botão de assinar que pareça premium e chame atenção
- efeito de reflexo deslizando no botão de agendar
- botão em pílula com contorno brilhante animado
- aquele botão escuro com luz girando de site de SaaS
- chamada para ação que brilhe sem usar cores fortes
Também chamado de
- shimmer button
- botão com brilho
- botão com reflexo
- shine button
- botão com luz na borda
- animated border shine
Quando usar
- Botão de oferta, assinatura ou teste grátis em landing de SaaS
- Agendamento de demonstração, consulta ou reunião
- Heros escuros que pedem um destaque discreto em preto e branco
- Chamada única por seção, perto do preço
Quando evitar
- Fundos pretos sem contorno visível, em que o botão quase desaparece
- Modo escuro sem ajuste: o texto padrão fica preto sobre o fundo preto
Como pedir para a sua IA
Crie um shimmer button em pílula: um feixe de luz percorre a borda sem parar e um brilho interno cresce no hover. Use as cores da minha marca no fundo e no brilho, garanta contraste do texto nos modos claro e escuro e pare o feixe para quem prefere menos movimento.
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 Shimmer Button
Dá para trocar as cores do Shimmer Button?
Sim. O Shimmer Button recebe a cor da luz pela propriedade shimmerColor, o fundo por background, os cantos por borderRadius, a espessura do feixe por shimmerSize e a duração por shimmerDuration. O padrão é luz branca sobre fundo preto, em pílula, com ciclo de 3 segundos.
O Shimmer Button funciona no modo escuro?
Funciona com um ajuste. O fundo do Shimmer Button vem da propriedade background e não muda com o tema, mas o texto padrão fica preto no modo escuro, o que some sobre o fundo preto. A demo resolve isso com texto branco no conteúdo. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto.
O Shimmer Button respeita quem prefere menos movimento?
O Shimmer Button original anima sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa movimento reduzido no sistema: basta pausar as duas animações CSS do feixe e manter o contorno e o brilho interno, que já dão acabamento ao botão.
