CSS Button Style Generator
Note: A touch target under 44px tall is hard to hit on a phone. The rendered height above updates as you change the padding and font size — if it drops below that, add vertical padding rather than a min-height, so the label stays centred.
The focus ring is the part worth arguing about. Removing the browser's default outline is the first thing almost every button style does, and if nothing replaces it, anyone navigating by keyboard loses track of where they are on the page entirely. The output uses focus-visible rather than focus, which is what lets you have a visible ring for keyboard users without one appearing on every mouse click — the behaviour people were trying to get when they deleted the outline in the first place.
Padding is expressed as two values because a button's shape is governed by the ratio between them, not by either one alone. Roughly two to three times as much horizontal padding as vertical is what reads as a button rather than a box; below that it looks cramped and above it looks like a banner. The generator keeps the two independent so you can see the point where it stops working.
One thing the preview cannot show you is the touch target. Anything under 44 pixels tall is difficult to hit reliably on a phone regardless of how it looks on a desktop screen, so the height is reported next to the preview as you adjust the padding and font size.
Frequently Asked Questions
Why does the CSS include focus-visible when I did not ask for it?
Because outline: none without a replacement makes a button unusable by keyboard, and it is the single most common accessibility defect in hand-written button CSS. You can delete the rule from the output, but the ring is generated to match your colours so that keeping it costs nothing.
Should I use a button element or a styled link?
A button performs an action on the current page; a link navigates somewhere. The distinction is not cosmetic — screen readers announce them differently, links work with middle-click and open-in-new-tab, and buttons respond to the space bar. This CSS is written for a button element but applies to an anchor unchanged if you add text-decoration: none.
Why is my transition not firing on the background colour?
Almost always because the hover rule changes a property the transition does not list. transition: background-color only animates the background; if your hover also moves the button with transform, that jump is instant. The generated rule names every property it actually changes.
Can I use this for a whole set of buttons?
Yes, and the cleanest way is to generate your primary button, then keep the padding, radius, font and transition while changing only the colours for secondary and danger variants. Copying the whole block per variant is what leads to the padding drifting apart later.
