elefcode

CSS Button Generator

Design a button with hover, active, focus and disabled states — solid, outline, soft, ghost, gradient or 3D — and copy CSS or Tailwind classes.

Colour
Size & shape
Interaction
Preview

Hover, click and Tab to the button to try every state.

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 6px rgb(37 99 235 / 0.25);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, filter 150ms ease;
}

.btn:hover {
  background: #2157cf;
  color: #ffffff;
  border-color: #2157cf;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 6px 14px rgb(37 99 235 / 0.3);
}

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

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #93c5fd;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
  • Text contrast 5.17:1 — passes WCAG AA.

Advertisement

Guide

About the CSS Button Generator

A button needs more than a colour: it has to look clickable at rest, respond on hover, react when pressed, show a clear outline for keyboard users and look unavailable when disabled. This generator writes every one of those states from a few choices.

Hover colours are derived from your brand colour automatically, and the preview is a real button — hover it, click it and Tab to it to see each state.

Focus-visible, not outline: none

Removing the focus outline makes a site unusable with a keyboard. :focus-visible shows a clear ring when someone tabs to the button, but not when they click it with a mouse, so it looks clean for everyone without hiding focus from the people who need it.

Contrast and size

Button text needs a contrast ratio of at least 4.5:1 against its background (3:1 for large text) to meet WCAG AA, and WCAG 2.2 asks for click targets of at least 24×24 pixels. The generator checks both as you design.

How to use it

  1. 1Pick a style and your brand colour.
  2. 2Set size, padding and corner radius.
  3. 3Choose hover and press effects.
  4. 4Copy the CSS and HTML, or the Tailwind classes.

Frequently asked questions

Should I use <button> or <a> for a button?

Use <button> for actions (submit, open, toggle) and <a href> for navigation to another page. The class works on both; links just need the same styles.

How do I add an icon?

Put an <svg> or icon element inside the button next to the text. The button is a flex container with a gap, so the icon lines up automatically.

How is the hover colour chosen?

Solid buttons darken the brand colour by about 12%. Outline, soft and ghost buttons add a light tint of it behind the text.

Can I make the button full width?

Add width: 100% (or Tailwind’s w-full) to the button.

Why does the Tailwind version look slightly different?

Shadows use Tailwind’s presets rather than the exact coloured shadows in the CSS. Everything else matches.

Related tools

Box Shadow GeneratorContrast CheckerCSS Gradient GeneratorCSS Loader Generator