Ferramentas gratuitas
Português
Gerar botões CSS
Gerar botões CSS — Escolha tamanhos ou cores e confira o código ou resultado. Guia de entrada: Cor de fundo, Cor, Espaçamento interno do botão (px), Raio dos cantos (px). Sem cadastro.
Sem cadastro
Carregando ferramenta…
Como usar
- 1Guia de entrada: Cor de fundo, Cor, Espaçamento interno do botão (px), Raio dos cantos (px).
- 2Execute a ferramenta e confira o resultado.
- 3Copiar resultado / Salvar resultado.
Saiba mais
Confira intervalos e unidades. Os resultados dependem dos dados e do navegador.
Os anúncios podem processar dados de conexão. A personalização segue suas escolhas de privacidade. Privacidade (inglês)
Exemplo calculado de entrada e saída
Resultados do motor real com os valores abaixo, sem dados pessoais ou trabalhos salvos. Carregue o exemplo na ferramenta para conferir as mesmas entradas.
Entrada de exemplo
| Campo | Valor |
|---|---|
| Cor de fundo | #0F766E |
| Cor | #FFFFFF |
| Espaçamento interno do botão (px) | 12 |
| Raio dos cantos (px) | 12 |
Resultado de exemplo
.button {
background: #0F766E;
color: #FFFFFF;
padding: 12px 24px;
border: 0;
border-radius: 12px;
min-height: 44px;
cursor: pointer;
}
.button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }Condições de entrada
São limites reais de validação, sem garantir que todo valor aceito seja realista ou adequado ao seu caso.
- Espaçamento interno do botão (px): Faixa aceita: 4 ≤ x ≤ 40
- Raio dos cantos (px): Faixa aceita: 0 ≤ x ≤ 100