CSS Button Generator

The CSS makes anything look like a button; the HTML decides how it behaves. Pick the element by what happens when it is used, then put the class on it.

The HTML tab writes the right element for each case. A link styled as a button is fine when it navigates; a button that navigates, or a link that runs a script, confuses people who use screen readers, because they are told one thing and get another.

Order matters: :active comes after :hover so a press wins over the hover it happens during, and the disabled rule comes last so it undoes both. :focus-visible shows the ring when someone tabs to the button but not when they click it, and has worked since Chrome 86, Firefox 85 and Safari 15.4. For focus ring sizes and why it should be an outline, see the border generator.

On phones, a tap triggers :hover and the hover colour can stick until you tap somewhere else, so the button looks pressed when it is not. "Hover colours only with a mouse", under Fine-tune, wraps the rule in @media (hover: hover), supported since Chrome 38, Firefox 64 and Safari 9.

A button label is text, so WCAG 1.4.3 asks for 4.5:1 against the button, or 3:1 for large text: 24px and up, or about 18.66px when bold. Brand blues and cyans are the usual surprise:

With the automatic text colour on, the generator picks black or white for solid and gradient buttons, then moves the hover and pressed backgrounds away from that colour: darker under white text, lighter under black. Darkening a light button under black text is a common way to break contrast exactly when someone is about to click. For gradients it checks both ends and the middle.

Outline, soft and ghost buttons have the page behind them, so their label is the button colour shifted just far enough to pass. A #0EA5E9 outline button on white gets #066F9E text, 5.56:1, rather than the 2.77:1 the raw colour would give. Disabled buttons are exempt from these ratios, which is why they can be faded.

Height is the line box plus padding plus border. The Medium size is 16px text × 1.25 line height = 20px, + 2 × 10px padding + 2 × 1px border = 42px. Width is the label plus the side padding, so it is measured on screen in the readout above.

min-height is safer than adding padding to hit 44px: the button stays 44px when the font is small and grows normally when the label is large or wraps. Small icon-only buttons can keep a small icon and still meet the target with padding.

• Buttons do not inherit the page font. Browsers give form controls the system font and their own size, so a <button> and an <a> with the same class can look different. "Same as the page" writes font-family: inherit, and the generator always sets the size.
• em units scale the whole button. With em output, padding, border and rounding are written relative to the button's own font size: 10px padding on 16px text becomes 0.625em. Change only font-size and you get a matching small or large button.
• line-height: 1.25, not 1. At 1, letters with descenders can touch the edge, and a label that wraps onto two lines has no space between them.
• inline-flex with gap centres the label and spaces an icon from it without margins on the icon.

The generator styles both. disabled is simpler, but the button disappears from keyboard navigation, so nobody tabbing through a form ever finds out it exists or why it is off. aria-disabled keeps it focusable so you can explain, for example "Fill in your email first". Often the best choice is to leave the button enabled and show what is missing when it is pressed.

The 3D depth option gives the button a solid, unblurred shadow 4px below it in a darker shade, which reads as the button's side. On :active the button moves down 4px and the shadow shrinks to nothing, so it sinks while its bottom edge stays in the same place and nothing around it moves:

.button        { box-shadow: 0 4px 0 #881313; }
.button:active { box-shadow: 0 0 0 #881313; transform: translateY(4px); }

transform does not affect layout, so the jump never pushes the content below. For softer, blurred shadows, build them in the box-shadow generator and paste them in.