Como ele é
Pense num botão apoiado numa vitrine iluminada por baixo. No tema claro, ele é quase preto, com cantos arredondados e 44 pixels de altura; no escuro, inverte e fica branco. Uma faixa com vermelho, verde-limão, azul, ciano e roxo corre na horizontal pela borda, mais visível na parte de baixo, e completa o ciclo a cada 2 segundos. Logo abaixo do botão, uma mancha das mesmas cores, bem desfocada, brilha como um reflexo. A animação é contínua e não depende do mouse; o foco do teclado mostra um anel.
Você pode estar procurando isto se pediu algo assim
- botão com luz de arco-íris embaixo, tipo reflexo
- botão preto com borda colorida que fica correndo
- botão de lançamento com brilho colorido que chame atenção
- aquele botão com glow colorido de site de app de IA
- chamada para ação com degradê de cores animado
- botão que fica branco no modo escuro e brilha colorido
Também chamado de
- rainbow button
- botão arco-íris
- botão com glow
- rainbow glow button
- botão com brilho colorido
- animated gradient button
Quando usar
- Chamada de lançamento de produto, recurso novo ou lista de espera
- Landing de app de IA, ferramenta criativa ou produto para criadores
- Botão principal sobre fundo liso, claro ou escuro
- Banner de anúncio com uma única ação
Quando evitar
- Marcas com paleta contida, sem trocar as cores do arco-íris
- Telas com vários botões de destaque, em que o brilho perde o sentido
Como pedir para a sua IA
Crie um botão com brilho de arco-íris: as cores correm pela borda e um reflexo colorido desfocado aparece embaixo, com versão invertida no modo escuro. Use as cores da minha marca, mantenha o anel de foco do teclado e pare a animação 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 Rainbow Button
Posso usar o Rainbow Button como link?
Pode. O Rainbow Button tem a propriedade is, que define a tag renderizada, e o padrão é button. Basta trocar para a e passar o endereço. O visual continua o mesmo, com anel de foco do teclado e um estilo próprio para o estado desativado.
O Rainbow Button funciona no modo escuro?
Funciona. O Rainbow Button já traz duas versões: no tema claro, o miolo é quase preto; no escuro, fica branco, e o texto usa a cor de contraste do tema. As cores do arco-íris ficam em variáveis CSS, e o prompt do THM Componentes orienta a IA a substituir essas cores pelos tokens do projeto.
O Rainbow Button deixa o site lento?
Não costuma deixar. O Rainbow Button anima só a posição de um gradiente com CSS, sem JavaScript de animação, e é classificado como Leve no THM Componentes. O reflexo embaixo usa desfoque, a parte mais exigente, então vale conferir o INP em celulares mais simples. Para movimento reduzido, o prompt pede uma versão estática.
