CSS Button Generator
A CSS button generator turns visual settings into a rule you can paste. A button needs only background-color, color, padding and border-radius; a border is optional, and padding is written vertical then horizontal. Example: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff gives a rounded blue button whose label passes WCAG AA at 5.17:1 contrast.
Preview
Accessibility check
Customize
Quick Templates
Generated Code
Popular Tools
About CSS Button Generator
CSS Button Generator turns a handful of sliders and colour pickers into the one CSS rule a button actually needs. You set the label, the background and text colours, the font size and weight, the horizontal and vertical padding, the border radius, the border width and colour, and one of four shadow depths; an optional second colour turns the flat fill into a 135-degree linear gradient. The preview sits above the controls and is a real HTML button styled with your values at the size it will render on your page, so what you approve is what you ship.
Two things make the output usable rather than decorative. First, the code panel has two tabs: a reusable .btn class with :hover, :active, :focus-visible and :disabled rules to drop into a stylesheet, and the same button element with everything inlined in a style attribute for page builders, CMS blocks and email templates that strip external CSS. Second, the accessibility panel measures the colour pair against WCAG 2.2 and reports the contrast ratio with an AAA, AA or failing verdict, switching to the large-text thresholds when your font size and weight qualify.
It also reports the rendered height - twice the vertical padding, plus twice the border, plus 1.2 times the font size, the line-height the rule pins so the button on screen is exactly as tall as the readout claims - against the 24 x 24 and 44 x 44 CSS pixel targets in SC 2.5.8 and SC 2.5.5. A gradient is checked against both stops and the worse of the two ratios is the one shown. The eight presets - Primary, Danger, Success, Outline, Pill, Gradient, Ghost and Neon - are starting points rather than an end state: click one, then keep dragging.
No colour, label or slider position is sent anywhere; the contrast maths, the preview and the code are computed in the page itself, which is why the ratio updates on the same keystroke that redraws the button. What you copy is a single class with no framework to install, no build step and no runtime script, so it works wherever plain CSS works.
Use Cases
How to use
Type the wording you want on the button into Button Text, then set the Background and text colours with the swatches or by typing hex codes beside them.
Drag the font size, horizontal padding, vertical padding and Border Radius sliders to shape the button, and raise Border Width with a Border Color for an outlined look.
Choose a Font Weight of Normal, Medium, Semi-bold or Bold, and a Shadow of None, Small, Medium or Large.
Tick Gradient and pick the second colour to fade the background into a diagonal two-colour gradient.
Click a Quick Templates card such as Primary, Outline, Pill, Gradient, Ghost or Neon to load a finished style you can keep tweaking.
Confirm the live button in the Preview panel, switch the output tab to CSS or HTML + CSS, and press the copy icon on the code box.
Pro Tips
- Set the font size before anything else. Padding and border radius are much easier to judge once the label is at its final size, and the height readout (2 x vertical padding + 2 x border-width + 1.2 x font-size) moves with it.
- Load a preset, then tweak. Outline and Ghost already start with a border width above zero, which is the fastest route to a secondary button.
- Type hex codes into the field beside each swatch instead of hunting inside the colour picker; the preview and the contrast ratio update on every keystroke.
- AA contrast is required at every text size; only the threshold moves — 4.5:1 for normal text, 3:1 once the label is 24px, or 18.66px and bold. A 3:1 pair can look fine on a bright monitor and be unreadable outdoors, so treat the lower bar as a ceiling, not a target.
- Gradient fills are checked against both stops and the worse ratio is reported, so if only one end fails, move that stop rather than recolouring the whole button.
Troubleshooting
The copied CSS has no visible effect on my page.
The class is being overridden, or was never applied. Confirm the element carries class="btn", load your stylesheet after any framework CSS, and open the Styles panel in DevTools: a struck-through declaration means another selector wins on specificity or order.
The gradient looks flat or does not appear at all.
A gradient is a background image, not a background colour. Tick Gradient so the tool emits background: linear-gradient(...) instead of background-color. If it still does not show, look for a later background shorthand or a later background-image on the same element: the shorthand resets background-image to none and wipes the gradient out. A later background-color cannot hide it, because CSS Backgrounds 3 paints the colour underneath the background images.
The contrast badge says the colours fail, but the button looks fine to me.
Contrast is measured on relative luminance, not on how vivid a colour feels. Mid-tone pairs such as #f59e0b with white text land near 2:1 despite looking bright. Darken the background or switch the label to near-black; the ratio updates as you type.
Frequently Asked Questions
Write one rule for the class and set six declarations: background-color, color, font-size, font-weight, padding and border-radius. Add box-shadow and a border only where the design calls for them. The generator writes exactly that rule for you: drag the sliders, watch the live preview, then copy the .btn block from the CSS tab into your stylesheet.
The CSS tab gives you a reusable .btn class plus its state rules to paste into a stylesheet, so every button on the site changes when you edit that one block. The HTML + CSS tab gives you a single button element with the same declarations inlined in a style attribute, which is what page builders, CMS blocks and email templates need because they strip external stylesheets. Retag it as an anchor with href when the click navigates.
Raise the Border Radius slider. Around 8px you get the soft rectangle most interfaces use, and above half the button height the corners merge into a pill. With the default 16px font and 12px vertical padding the button is 43px tall, so any radius past about 22 already looks fully rounded and 999px in hand-written CSS means the same thing.
Yes. Each time you change the text or background colour it recomputes the WCAG contrast ratio and shows AAA, AA or a failure. Normal text needs 4.5:1 for AA and 7:1 for AAA; text at 24px, or 18.66px and bold, counts as large and needs only 3:1 and 4.5:1. Gradient fills are measured against both colour stops.
The size panel reports the rendered height as twice the vertical padding, plus twice the border width, plus 1.2 times the font size - the line-height the generator pins in the rule, so the number matches the button drawn above it. WCAG 2.2 SC 2.5.8 asks for a 24 x 24 CSS pixel target and SC 2.5.5 raises that to 44 x 44. The default 16px font with 12px vertical padding gives 43px, which clears the minimum comfortably.
Use a button when the click acts on the current page: submitting a form, opening a dialog, running JavaScript. It is focusable by default, fires on Enter and Space, and supports the disabled attribute. Use an anchor with href when the click navigates to another URL, so middle-click and "open in new tab" still work. Both can carry the same .btn class.
The generated CSS already carries .btn:hover and .btn:active. Leave the focus and disabled option ticked and you also get .btn:focus-visible with a 3px outline offset by 2px, and .btn:disabled at half opacity with cursor: not-allowed. Never delete a focus outline without replacing it with something visible, or keyboard users lose all trace of where they are.
Yes. The output is plain CSS with no licence, no attribution requirement and no runtime dependency, and the credit comment on the first line can be deleted. Nothing you type is uploaded either: the preview, the generated code and the contrast maths are all computed by JavaScript inside this page, so your colours and labels never reach a server.
Inherited styles are almost always the cause. A framework reset, a parent font-family, a global button rule or a higher-specificity selector can override the pasted class. Load your stylesheet after the framework CSS, keep .btn on a single element, and read the Styles panel in DevTools: a struck-through declaration tells you exactly which selector won.