# Gradient Button Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque. > O Gradient Button é um componente do THM Componentes: um botão com borda fina em gradiente de arco-íris que gira sem parar em volta do texto, com leve desfoque. É feito só com CSS, usa o elemento button nativo e permite ajustar cores, espessura, cantos, desfoque e velocidade. Serve para a chamada principal de uma landing ou do checkout. - 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/gradient-button/ ## 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 ```text 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. ## Componentes relacionados - [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. - [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. - [Border Beam](https://vibecode.thmtecnologia.com/componentes/border-beam/): Um pequeno feixe de luz colorida dá voltas pela borda de um card ou seção, como um cometa contornando a moldura. - [Glow Border](https://vibecode.thmtecnologia.com/componentes/glow-border/): Um brilho colorido passeia devagar pela borda de um card ou campo, acendendo um trecho e depois outro. - [Neon Border](https://vibecode.thmtecnologia.com/componentes/neon-border/): Uma borda fina com luz azul e rosa que gira em volta do campo ou do botão, como um letreiro de neon. --- 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.