Como ele é
Imagine uma moldura de neon multicolorida girando em volta do botão. Uma roda de cores com vermelho, laranja, amarelo, verde, azul, anil e violeta gira atrás do botão, uma volta a cada 2,5 segundos, e só aparece como uma borda de 2 pixels em volta do conteúdo, com 4 pixels de desfoque que suavizam o brilho. O miolo é preto por padrão, com cantos de 8 pixels. A cor do miolo não muda sozinha com o tema: na demo, ela fica preta no modo escuro e branca no claro. O movimento é contínuo e não depende do mouse.
Você pode estar procurando isto se pediu algo assim
- botão com borda colorida girando em volta
- botão de comprar com contorno arco-íris animado
- chamada para ação que chame atenção sem aumentar o tamanho
- botão com brilho neon colorido na borda
- contorno em gradiente que fica rodando no botão principal
- deixar o botão do checkout com cara de produto gamer
Também chamado de
- gradient button
- botão com borda gradiente
- botão arco-íris
- conic gradient border
- animated border button
- botão com borda animada
Quando usar
- Botão principal de uma landing de lançamento
- Chamada para assinar ou comprar no fim de uma página de vendas
- Produtos de tecnologia, games ou criadores com visual vibrante
- Um único destaque por tela, perto do preço ou do formulário
Quando evitar
- Vários botões na mesma tela, em que as bordas girando competem entre si
- Marcas sóbrias, sem trocar as cores do arco-íris pela paleta do projeto
Como pedir para a sua IA
Crie um botão com borda em gradiente cônico animado girando em volta do texto, nas cores da minha marca, com desfoque leve. Use o elemento button nativo com foco visível, mantenha o contraste do texto e pare a rotaçã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 Gradient Button
Dá para trocar as cores do Gradient Button?
Sim. O Gradient Button recebe a lista de cores pela propriedade colors e monta o gradiente com elas, então você pode usar só os tons da marca. Também dá para ajustar a espessura da borda, o desfoque, os cantos, a cor do miolo e a duração de cada volta, que por padrão é de 2,5 segundos.
O Gradient Button funciona no modo escuro?
Funciona, mas a cor do miolo do Gradient Button não segue o tema sozinha: ela vem da propriedade bgColor, preta por padrão. A demo troca para branco no modo claro. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto, o que resolve a troca entre claro e escuro.
O Gradient Button respeita quem prefere menos movimento?
O Gradient Button original gira sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa movimento reduzido no sistema, o que aqui é simples: pausar a animação CSS e manter a borda colorida parada.
