Gerador de botão CSS

Personalize um botão (cores, cantos arredondados, sombra, texto) e veja o resultado ao vivo antes de copiar o código CSS completo, pronto para colar no seu projeto. Geração 100% local no seu navegador.

Texto do botão

Cor de fundo

Cor do texto

Raio dos cantos: 8px

Tamanho do texto: 16px

Padding vertical: 12px

Padding horizontal: 24px

Sombra projetada Texto em negrito

Código CSS

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

Como funciona

Um botão bem projetado deve ser imediatamente identificável como clicável, com contraste suficiente entre o texto e o fundo e um efeito de hover que confirme a interatividade. Ajuste cada parâmetro (cores, raio dos cantos, sombra, tamanho) e acompanhe o resultado ao vivo na prévia; depois, copie o código CSS completo, que inclui automaticamente um estado :hover com um tom mais escuro e um leve efeito de elevação.

Como a cor de hover é calculada?

A cor de hover é gerada automaticamente escurecendo a cor de fundo escolhida, para garantir um contraste visível quando o mouse passa por cima, sem que você precise escolher uma segunda cor manualmente.

O CSS gerado é compatível com todos os frameworks?

Sim, é CSS padrão, sem dependência de nenhum framework específico: você pode colá-lo em uma folha de estilos tradicional, adaptá-lo como classe utilitária ou convertê-lo manualmente para estilo Tailwind ou styled-components, se o seu projeto os usar.

A visualização e o código são gerados em tempo real no seu navegador, sem nenhuma requisição a um servidor.