CSS Button Generator
background: #0c6249;
color: #ffffff;
padding: 12px 22px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.18);
cursor: pointer;The CSS button generator styles a live button with background and text colour, padding, corner radius, font size, weight and shadow depth. It generates the resting state only. The hover, focus and disabled states are yours to add, and the focus state is not optional.
How it works
The generated rule sets border to none, which removes the default browser chrome, and cursor to pointer. Both are conventional for a styled button.
- Padding is written vertical then horizontal, matching the two-value shorthand.
- Shadow depth drives both the vertical offset and the blur, with blur at twice the offset, which is the ratio that reads as a natural lift.
- Font size is set explicitly because buttons do not inherit font settings from their parent in every browser.
Two things the generated CSS deliberately does not do: it does not remove the focus outline, and it does not set a fixed height. Removing the outline breaks keyboard navigation, and a fixed height fights the padding you just set.
Examples
A standard primary button
Padding
12px vertical, 22px horizontal
Radius
8px
Font size
16px
Weight
600
Result
background: #0c6249; color: #ffffff; padding: 12px 22px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; box-shadow: 0 2px 4px rgb(0 0 0 / 0.18); cursor: pointer;
Vertical padding of 12px with a 16px font gives roughly a 44px tall target, which meets the usual minimum touch target guidance without setting an explicit height.
A flat pill button
Radius
40px
Shadow depth
0px
Result
border-radius: 40px; box-shadow: 0 0px 0px rgb(0 0 0 / 0.18);
A radius larger than half the button height collapses to a pill. With shadow depth at zero the box-shadow line can be deleted entirely.
Frequently asked questions
Why does the generated button CSS not include a hover state?
Because the tool styles one state and a real button needs at least four, resting, hover, focus-visible and disabled. Generating only the resting state makes it obvious the others still need writing, rather than shipping a button that looks finished and is not.
Is it safe to remove the focus outline?
No. The outline is how keyboard users know where they are, and removing it without a replacement makes a page unusable without a mouse. If the default ring clashes, style :focus-visible with your own visible indicator instead of setting outline: none.
How do I make sure the button is a large enough touch target?
44px in both dimensions is the usual minimum. With a 16px font, vertical padding of 12px gets there without a fixed height, which keeps the button flexible if the label wraps.
Should I apply this to a button element or a link?
A button element for actions, an anchor for navigation. Styling makes them look alike, but they behave differently for keyboards and screen readers, buttons activate with Space, links with Enter, and only links can be opened in a new tab.