Buttons carry more weight than their size suggests
A button is where a visitor decides to act, which makes it one of the few elements on a page where visual design has a directly measurable effect. Small changes to size, contrast and placement produce real differences in click rate.
The generated CSS includes states you should not skip
This generator outputs four states, and three of them are commonly forgotten.
The hover state confirms the element is interactive. Without it, a button feels dead on desktop.
The focus-visible state is an accessibility requirement, not a nicety. Keyboard users navigate by tabbing, and without a visible focus indicator they cannot tell where they are on the page. The common practice of setting outline to none breaks keyboard navigation entirely and is one of the most damaging accessibility mistakes on the web. Using focus-visible rather than focus means the indicator appears for keyboard users without adding a ring for mouse clicks.
The active state gives tactile feedback at the moment of pressing, which makes an interface feel responsive rather than laggy.
Sizing for touch
Both Apple and Google recommend a minimum touch target of around 44 to 48 pixels. A button with small text and tight vertical padding falls below this and becomes frustrating on a phone, where most traffic now originates.
Horizontal padding should exceed vertical padding — roughly twice as much is a good starting ratio. Buttons with equal padding on all sides look cramped.
Contrast
Button text must meet the same contrast requirements as body text: 4.5:1 for normal sizes. Light text on a mid-tone brand colour frequently fails, and gradient backgrounds need checking against their lightest point rather than an average.
The border of the button itself also needs 3:1 contrast against the surrounding background under accessibility guidelines, which catches out low-contrast ghost and outline styles.
Choosing a style
Solid buttons carry the most visual weight and should be reserved for the primary action on a page. Outline and ghost styles work for secondary actions, creating clear hierarchy — if every button is solid, none of them stands out.
Gradients add depth but should stay subtle. A gradient between two closely related shades reads as polished; one between distant hues reads as decorative and dates quickly.
Use a button element
Style a real button or anchor element rather than a div. Native elements are keyboard-focusable, announce themselves correctly to screen readers, and respond to Enter and Space without any JavaScript. Recreating that on a div is a great deal of work to arrive back where you started.
Generated in your browser
Everything is computed locally with no limits or watermarks.
Frequently Asked Questions
Why does the CSS include a focus-visible state?
Keyboard users need a visible indicator of where they are. Removing focus outlines breaks keyboard navigation and is a serious accessibility failure.
How large should a button be?
At least 44 to 48 pixels tall for touch targets, per Apple and Google guidance. Horizontal padding should be roughly double the vertical.
Should I use a div or a button element?
Always a real button or anchor. Native elements are keyboard-focusable and announce themselves correctly to screen readers with no extra work.
What contrast does button text need?
The same 4.5:1 as body text. Light text on mid-tone brand colours frequently fails, and gradients should be checked at their lightest point.
When should I use outline or ghost styles?
For secondary actions. Reserving the solid style for the primary action creates clear hierarchy; if every button is solid, none stands out.