Gerador de Botões CSS
Gere botões CSS estilizados instantaneamente. Escolha entre flat, outlined, gradient, shadow e ghost — copie o CSS e HTML num clique.
① Escreva o texto do botão ② Escolha estilo e forma ③ Copie CSS e HTML
Estilo
Forma
Cor principal
#C9B89A
Como funciona
Cada estilo usa CSS puro sem JavaScript. Flat e gradient usam fundos preenchidos; outlined e ghost usam fundos transparentes com bordas; shadow adiciona um box-shadow colorido que corresponde à cor do botão.
Opções de forma
Quadrado usa border-radius 4px para cantos nítidos. Arredondado usa 8px para um aspeto moderno. Pill usa 9999px para criar uma forma de cápsula totalmente arredondada.
Estados hover
O CSS gerado inclui estilos hover usando opacity: 0.85 ou filter: brightness() para que apenas precise de uma variável de cor para os estados padrão e hover.
.btn {
padding: 0.6em 1.4em;
cursor: pointer;
font-size: 15px;
font-family: inherit;
border-radius: 8px;
transition: all 0.2s;
background: #c9b89a;
color: #fff;
border: none;
}
.btn:hover {
opacity: 0.85;
}
Saída HTML<button class="btn">Click me</button>
O que é um gerador de botões CSS?
Um gerador de botões CSS é uma ferramenta que produz uma classe CSS .btn pronta a usar e o markup HTML correspondente para componentes de botão estilizados. O design moderno de botões envolve escolhas cuidadosas de background, border-radius, font-size e estados hover interativos. Padrões comuns: flat (preenchimento sólido), outlined (transparente com borda), gradient, shadow (brilho box-shadow) e ghost (preenchimento semi-transparente).
Perguntas frequentes
Um botão flat usa uma única cor de fundo sólida sem gradientes ou sombras. Um botão gradient usa um linear-gradient da cor principal para um tom mais escuro da mesma cor.
O estilo outlined usa um fundo transparente com uma borda colorida (2px solid) e texto colorido. No hover, o botão geralmente ganha um fundo subtil. Funciona bem como botão de ação secundária.
Um botão ghost usa um fundo muito ligeiramente tingido (cor com 13% de alpha) e uma borda semi-transparente (44% de alpha). Cria uma aparência mínima adequada para ações terciárias.
O tom mais escuro é calculado convertendo a cor hex para HSL e reduzindo a luminosidade em 20%.
Os botões gerados incluem contraste suficiente. Para acessibilidade completa, adicione atributos aria-label e certifique-se de que os estilos de foco são visíveis na sua folha de estilos.
O CSS gerado inclui estados hover. Para adicionar focus e active, acrescente :focus { outline: 2px solid {color}; outline-offset: 2px; } e :active { transform: scale(0.97); } ao ruleset .btn.
Sim. Use nomes de classe diferentes (ex. .btn-primary, .btn-outlined) e gere CSS separado para cada um.