CSS Button Generator

What the CSS button generator does

Buttons are the most-clicked element on any site and the one most often built wrong — inconsistent padding, no hover state, no focus ring, text that is hard to read on the fill. This generator lets you set the label, colours, padding, radius, border and font, choose a hover effect (darken, lighten, scale or shadow), preview the result, and copy the CSS. Runs in your browser.

A solid base

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  font: 600 15px/1 system-ui, sans-serif;
  color: #fff; background: #E85D26;
  border: 0; border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover  { background: #cf4f1e; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #E85D2666; outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

inline-flex centres the label and any icon; line-height: 1 keeps the height predictable; :focus-visible gives keyboard users a ring without showing it on mouse clicks. Every button needs the four states — rest, hover, active, focus — plus disabled.

Hover effects compared

Effect	CSS	Feel
Darken	background: darker shade	Conventional, works on any colour
Lighten	background: lighter shade	Softer; suits dark UIs
Scale	transform: scale(1.04)	Lively; keep under 1.05 or it looks jumpy
Shadow	box-shadow: 0 6px 16px rgba(0,0,0,.2)	Lifts the button; pair with translateY(−1px)

Keep transitions at 100–200 ms. Anything slower feels laggy; instant feels cheap. Hover effects do not exist on touch devices, so the rest state must already look clickable.

Sizing and spacing rules

Touch target: at least 44 × 44 px on mobile (Apple) or 48 px (Material). Padding of 12–14 px vertical with 15–16 px text gets there.
Horizontal padding roughly 1.5–2× the vertical: 10/20, 12/24, 14/28.
Radius: 4–8 px reads as neutral; 12–16 px as friendly; fully rounded (999 px) as a pill. Match the rest of the UI.
Hierarchy: one filled primary button per view; secondary as outline or subtle fill; tertiary as text-only. Do not make every button loud.
Width: size to content on desktop; full-width in mobile forms.

Contrast and accessibility

Label text needs 4.5:1 contrast against the fill (3:1 for large text). White on a mid orange or light green usually fails — check with a contrast tool.
The button itself should have 3:1 contrast against the page so it is findable.
Never remove the focus ring. Restyle it with :focus-visible if the default clashes.
Use a real <button> (or <a> for navigation), not a styled div — you get keyboard activation and screen-reader semantics for free.
Do not rely on colour alone for state; disabled buttons should look different in shape or opacity, not just hue.

Variants from one base

.btn--outline { background: transparent; color: #E85D26; border: 2px solid currentColor; }
.btn--ghost   { background: transparent; color: #E85D26; }
.btn--sm      { padding: 6px 12px; font-size: 13px; }
.btn--lg      { padding: 14px 28px; font-size: 17px; }
.btn--block   { display: flex; width: 100%; }

Frequently asked questions

Why does my button look different in Safari?

Browsers apply their own button styles. Reset with appearance: none; border: 0; font: inherit; to start from a clean slate.

Should links look like buttons?

A link that triggers navigation can be styled as a button when it is a primary call to action. Keep the element an <a> so it opens in new tabs and shows the URL.

How do I add an icon?

Place an inline SVG inside the button before or after the text; inline-flex with gap handles alignment. Size the icon in em so it scales with the text.

How do I show a loading state?

Disable the button, keep its width (min-width or a fixed width), and replace the label with a small CSS spinner — see the CSS Loader Generator.

What about dark mode?

Define the fill and text as custom properties and override them under prefers-color-scheme: dark. Lighten hover in dark mode rather than darkening.

Is the generated CSS framework-free?

Yes. It is plain CSS you can drop into any project, or port into Tailwind or CSS-in-JS.