Gerador de botões CSS
Crie botões e copie CSS limpo.
Defina o texto, as cores, o raio, o espaçamento e o tamanho da fonte de um botão, pré-visualize ao vivo e copie um CSS pronto para usar com estado hover.
Fundo
Cor do texto
Cor do hover
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}Como gerar CSS de botões
- Digite o texto do botão desejado.
- Escolha as cores de fundo, texto e hover.
- Ajuste raio, espaçamento e tamanho da fonte com os controles.
- Copie o CSS e adicione a regra hover à sua folha de estilos.
Perguntas frequentes
O CSS inclui efeito hover?
Sim. Uma regra :hover com a cor de hover escolhida é gerada junto com o estilo base.
Posso mudar a fonte ou o peso?
A saída define font-weight 700. Ajuste font-family e outras propriedades livremente após colar.
Alguma coisa é enviada?
Não. O gerador é totalmente client-side e não armazena nada.