Gerador de Botão CSS

Gere estilos de botão personalizados com CSS

Processamento no NavegadorSeus dados nunca saem do seu navegador

Button Style

Content

px
px
px

Border & Shape

Border Radius8px
Border Width2px
Transition200ms

Colors

Background
Text Color
Border Color
Hover Bg

Effects

Preview

CSS

.button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #3b82f6;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 200ms ease;
}

.button:hover {
  background: #2563eb;
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

HTML

<button class="button">Button</button>

Presets

About Gerador de Botão CSS

Gere estilos de botão personalizados com CSS

Use this free online geradores css tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.