Guia do Gerador de Botões CSS
Botões são o elemento mais clicado de qualquer página — carregam cada cadastro, compra e download. O gerador oferece 6 estilos (gradiente, contorno, 3D, pílula, brilho, reflexo), cada um com hover real, além de cor, raio e preenchimento personalizados.
Escolha um estilo, ajuste a cor e os controles, e copie o CSS pronto. Cole em um bloco <style>, adicione class="btn" ao seu botão e o efeito hover vem junto automaticamente.
Pro Tips
- Alinhe a cor do botão com o acento do seu CTA e mantenha contraste de texto de pelo menos 4.5:1 (WCAG AA).
- Sempre adicione um estado hover visível — um leve levantar ou sombra confirma que o botão é clicável e melhora a conversão.
Frequently Asked Questions
Q: Como adiciono o botão ao meu site?
Como adiciono o botão ao meu site? Copie o CSS gerado em um bloco <style> e use <button class="btn">Rótulo</button> no HTML.
Q: Por que meu botão gradiente aparece com cor sólida?
Por que meu botão gradiente aparece com cor sólida? Gradientes precisam de cor inicial e final — verifique se ambos os seletores estão definidos e se background não está sendo sobrescrito por outra regra.
Q: Posso mudar o efeito hover?
Posso mudar o efeito hover? Sim — o bloco .btn:hover é separado. Edite ou remova livremente as linhas de transform, sombra ou fundo.
Q: Esses botões são acessíveis?
Esses botões são acessíveis? Sim. Use contraste legível e adicione :focus-visible { outline: 2px solid; outline-offset: 2px; } para usuários de teclado.
Q: Posso usar em projetos comerciais?
Posso usar em projetos comerciais? Com certeza — o CSS gerado é original e gratuito para trabalhos pessoais e de clientes.
Cores do Brasil
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
Verde Bandeira #009C3BO verde da bandeira nacional, símbolo das matas
Amarelo Bandeira #FFDF00O ouro do losango da bandeira brasileira
Azul Bandeira #002776O azul do círculo e das estrelas
Azul Azulejo #1E5FA8Herança dos azulejos portugueses em igrejas e casarões
Rosa Choque #FF1493A energia vibrante do carnaval e das marcas jovens
Verde Amazônia #228B22A floresta tropical, pulmão do planeta
Amarelo Ouro #FFD700O ouro do barroco mineiro de Ouro Preto
Terracota Nordestina #CD5C5CA argila do sertão e do artesanato nordestino
Anil #4B0082Cor do vestido tradicional das baianas
Branco Areia #EDE4D3As praias de areia clara do litoral
Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.