# Arrebol Botão escuro com as cores do arco-íris correndo pela borda inferior e um reflexo colorido desfocado logo abaixo. > Arrebol é um componente do THM Componentes: um botão com as cores do arco-íris correndo pela borda e um reflexo colorido desfocado logo abaixo, como luz batendo no chão. O botão é escuro no tema claro e branco no tema escuro, e usa só CSS. Funciona bem como chamada de lançamento ou de produto criativo. - 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/arrebol/ ## 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 botão com reflexo colorido, botão arco-íris, botão com glow, rainbow glow button, botão com brilho colorido, botão com degradê animado ## 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 ```text 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 Arrebol ### Posso usar Arrebol como link? Pode. Arrebol 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. ### Arrebol funciona no modo escuro? Funciona. Arrebol 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. ### Arrebol deixa o site lento? Não costuma deixar. Arrebol anima só a posição de um gradiente com CSS, sem JavaScript de animação, e tem classificação 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. ## Componentes relacionados - [Cata-vento](https://vibecode.thmtecnologia.com/componentes/cata-vento/): Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque. - [Lampejo](https://vibecode.thmtecnologia.com/componentes/lampejo/): 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. - [Fogo-fátuo](https://vibecode.thmtecnologia.com/componentes/fogo-fatuo/): Um brilho colorido passeia devagar pela borda de um card ou campo, acendendo um trecho e depois outro. - [Rodopio](https://vibecode.thmtecnologia.com/componentes/rodopio/): Uma borda fina com luz azul e rosa que gira em volta do campo ou do botão, como um letreiro de neon. - [Adiante](https://vibecode.thmtecnologia.com/componentes/adiante/): 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. --- 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.