CSS Button Generator

Genereer aangepaste knopstijlen met CSS

BrowserverwerkingJe gegevens verlaten nooit je browser

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 CSS Button Generator

Genereer aangepaste knopstijlen met CSS

Use this free online css generatoren 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.