CSS Button Generator
Design a button with colours, radius, shadow and hover; copy CSS with a contrast check.
About this tool
Set the button text, background or gradient, text colour, padding, font size and weight, corner radius, border, shadow and hover effect. The preview updates live and the CSS and HTML are ready to copy. The output includes hover, active and keyboard-focus styles. A contrast check tells you whether the text meets WCAG AA against the background.
What makes a good CSS button
A good button is obviously clickable, readable and usable by everyone. Readability comes down to contrast. WCAG AA asks for 4.5:1 between text and background for normal text and 3:1 for large text. White text on a strong blue such as #2563eb reaches about 5.2:1 and passes, while white on a light blue such as #60a5fa manages only about 2.5:1 and fails. With a gradient, the check uses the weaker end. Size matters for touch: aim for at least 44 pixels of height on phones, which the padding sliders make easy. Feedback matters for confidence, so the generated CSS lifts or darkens the button on hover, nudges it down on press, and draws a clear outline for keyboard users with :focus-visible. Hand-made buttons often forget that last part. Use a real <button> for actions and an <a> for navigation. The same class styles both, but only the right element gives keyboard and screen-reader users the behaviour they expect. The CSS gradient generator, the box-shadow generator and the border-radius generator fine-tune individual properties, and the colour converter converts colour values. px vs rem vs em: what each unit is relative to, and which to use where explains sizing units.
Frequently asked questions
How do I make a button with CSS?
Style a <button> or <a> with padding, a background colour, text colour, border-radius and cursor:pointer, then add :hover, :active and :focus-visible states. This tool writes all of it for you.
What contrast ratio does button text need?
At least 4.5:1 for normal-sized text and 3:1 for large text (about 24 px, or 19 px bold) to meet WCAG AA.
Should I use a button or a link?
Use <button> for actions on the page and <a> for going to another page. Style them the same if you like, but keep the right element.
Is my design saved?
No. Everything runs in your browser and nothing is stored or sent.