CSS Button Generator
Design a button visually, check its hover and active states in the live preview and copy clean HTML and CSS. Nothing leaves your browser.
How to use the CSS Button Generator
- Start from a preset such as Classic, Outline or 3D push.
- Edit the text and font in the Text tab, then pick colors or a gradient in the Colors tab.
- Shape it with padding, radius and border under Size & border, and add depth in the Shadow tab.
- Tune the interaction in Hover & active, and use the Hover and Active preview buttons to check each state.
- Press Copy CSS (or Copy HTML + CSS) and paste the code into your project.
Anatomy of a good CSS button
A modern button style has four parts: the base rule, a :hover rule, an :active rule and a :focus-visible rule. Here is what each property in the generated code does:
| Property | Why it is there |
|---|---|
display: inline-flex + align-items: center | Centers the label vertically and lets you add an icon with gap. |
padding | Sets the size; buttons should grow with their text instead of using fixed widths. |
line-height: 1.2 | Keeps height predictable across fonts. |
border: none | Removes the browser's default button border. |
cursor: pointer | Shows the hand cursor that users expect on clickable elements. |
transition | Smoothly animates hover and press changes, typically 150–250ms. |
transform: translateY() | Lifts or presses the button without causing layout shifts (cheap to animate). |
:focus-visible outline | Shows keyboard users which button is focused, without showing a ring on mouse click. |
Recommended sizes
| Size | Font size | Padding | Approx. height |
|---|---|---|---|
| Small | 14px | 8px 14px | 33px |
| Medium | 16px | 12px 24px | 43px |
| Large | 18px | 16px 32px | 54px |
Height is font size × line-height (1.2) + top and bottom padding + borders. For touch screens keep primary buttons at least 44px tall, as recommended by Apple's Human Interface Guidelines; WCAG 2.2 (success criterion 2.5.8) sets 24 × 24 CSS px as the minimum target size.
Tips for button styles that convert
- One primary button per view. Make the main action solid and high-contrast; secondary actions use the Outline or Text link presets.
- Use verbs as labels. "Start free trial" beats "Submit".
- Keep hover subtle. A darker shade, 1–3px lift and a slightly bigger shadow feel responsive without being distracting.
- Respect reduced motion. Wrap transforms in
@media (prefers-reduced-motion: no-preference)if your buttons move a lot. - Disabled state. Add
.btn:disabled { opacity: .5; cursor: not-allowed; }when a button can be disabled.
Combine the button with a custom shadow from the box shadow generator, and keep your stylesheet neat with the CSS Formatter or small with the CSS Minifier.
Frequently asked questions
Should I use a button or a link element?
Use <button> for actions on the page (submitting a form, opening a menu, saving) and <a href> for navigation to another page or URL. The generated CSS works on both, so you can style a link to look like a button with the same class.
Why can't I animate a gradient background on hover?
Browsers cannot interpolate between two background-image gradients, so a gradient switch happens instantly even with a transition. The generated CSS still transitions transform, shadow, color and border smoothly. For a smooth gradient change, fade in a pseudo-element with the hover gradient using opacity.
What is the difference between :hover, :active and :focus-visible?
:hover applies while the pointer is over the button, :active while it is being pressed, and :focus-visible when the button is focused by keyboard (Tab). Always keep a visible focus style so keyboard users can see where they are; the generator adds an outline for you.
What size should a button be?
Aim for a touch target of at least 44 by 44 CSS pixels (Apple's guideline; WCAG 2.2 sets a 24 by 24 px minimum). With a 16px font, 12px vertical padding gives a height of roughly 43px.
How much color contrast does button text need?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). The tool calculates the ratio of your text color against the button background and warns when it is too low.
Why does the CSS use transition on specific properties instead of all?
Listing the properties that actually change (background-color, color, border-color, box-shadow, transform) avoids accidentally animating layout properties and makes the effect predictable and cheap to render.