CSS Button Generator

Design a button with hover and focus states and copy the HTML and CSS.

Presets:

Primary
Outline
Pill gradient
Flat dark

Font size

16px

Vertical padding

12px

Horizontal padding

24px

Corner radius

8px

Border width

0px

Letter spacing

0px

Transition

200ms

Hover, click, and Tab to the button to try every state.
HTML
<button type="button" class="btn">Get started</button>
CSS
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background: #D10505;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.btn:hover {
  color: #FFFFFF;
  background: #A30404;
  transform: translateY(-2px);
}

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

.btn:focus-visible {
  outline: 2px solid #D10505;
  outline-offset: 2px;
}

CSS Button Generator

Design a call-to-action button without writing CSS by hand. Set the text, font size and weight, padding, corner radius, colors, border, gradient, letter spacing, drop shadow, and hover animation. The preview is a real <button> using the generated code, so you can hover it, click it, and reach it with the Tab key to test every state.

What you get

The generator outputs a small HTML snippet and four CSS rules:

  • .btn – the base style with padding, font, colors, border, radius, and a transition.
  • .btn:hover – the hover colors and the optional lift effect.
  • .btn:active – resets the lift so the button feels pressed.
  • .btn:focus-visible – a clear outline for keyboard users that does not appear on mouse clicks.

Rename the class to match your design system; only letters, numbers, hyphens, and underscores are kept.

Design tips for buttons

  1. Size: aim for a touch target of at least 44 × 44 px. Vertical padding of 12px with a 16px font gets you there.
  2. Contrast: text and background need a contrast ratio of at least 4.5:1. White on the default red passes easily.
  3. Hover feedback: darken the background by 10–15% or lift the button by 2px. Keep transitions between 150 and 300 ms.
  4. Never remove focus styles without replacing them – keyboard and switch users depend on them.

Gradient buttons

Turn on Gradient background to use a vertical linear-gradient from the background color to an end color. For more shadow options, design one with the Box Shadow Generator and paste it into the .btn rule.

Frequently Asked Questions

Yes. The generated code is plain HTML and CSS; hover, active, and focus states are handled by CSS pseudo-classes.

Yes. Put the same class on an <a> element. The CSS already sets display: inline-block, removes the underline, and uses a pointer cursor.

It is a focus style that browsers show when the user navigates with the keyboard but usually not after a mouse click, so you get an accessible outline without visual noise for mouse users.