[btn]

CSS Button Generator

Accessible button styles with hover, focus and pressed states.

Button color

Style

Size

Corner radius (px)

Label

5.16 : 1

Text contrast

Result

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 10px 18px;
  font: 600 1rem/1.2 system-ui, sans-serif;
  background: #2563eb;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}
.btn:hover {
  background: #124fd6;
}
.btn:active {
  background: #003bc1;
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Runs entirely in your browser. Nothing is sent anywhere.

How it works

1Paste or type your text.
2Choose the options you need.
3Copy or download the result.

About this tool

CSS Button Generator: Accessible button styles with hover, focus and pressed states. Paste your text and the result appears immediately, ready to copy or download. Everything happens locally in your browser — nothing you paste is uploaded or stored.

How do I use the CSS Button Generator?

Paste or type your text. Choose the options you need. Copy or download the result.

Is the CSS Button Generator free?

Yes. It is completely free with no sign-up, no usage limits and no watermark.

Is my data sent to a server?

No. Everything is calculated locally in your browser. Nothing you enter is uploaded, logged or stored.

Does it work on my phone?

Yes. It works in any modern browser on Android, iPhone, iPad, Windows, Mac and Linux — no app needed.

CSS Button Generator

How it works

About this tool

Related tools