CSS Button Generator
This CSS button generator builds a complete button style, including the hover and active states — because a button without them feels broken however good it looks standing still. Feedback on interaction is not decoration; it is how a person knows the control registered their input. The hover uses a brightness filter rather than a second hard-coded colour, so it works with any background including gradients and needs no second colour to keep in sync. The preview is a real button element, which means you can tab to it and see the focus ring your styling actually produces rather than assuming one is there.
How it works
Builds a complete button style with hover and active states, since a button without them feels broken however good it looks. The hover uses a brightness filter so it works with any background including gradients.
The preview is a real button element, so you can tab to it and see the focus ring your styling actually produces.
Everything runs in your browser — nothing you enter is sent to a server.
The states a button needs
- Default — what it looks like at rest.
- Hover — confirms the pointer is over the right target.
- Active — confirms the press registered. A 1px downward shift reads as a physical press.
- Focus — shows keyboard users where they are. The browser provides one; do not remove it.
- Disabled — visibly inert, with reduced contrast and no pointer cursor.
Never remove the focus ring
outline: none without a replacement makes a page unusable for anyone navigating by keyboard — they
lose all indication of where they are. If the default ring clashes with your design, style it with
:focus-visible, which shows it for keyboard users and not for mouse clicks.
Size and target area
44 by 44 pixels is the practical minimum for a touch target. Padding is the usual way to reach it — a button with generous padding is easier to hit than one with a large font.
The element matters
A <button> is focusable, activates on Enter and Space, and is announced as a button. A styled
<div> does none of that unless you rebuild all of it by hand — so use the right element and
style it.
Frequently asked questions
Why does it include hover and active states?
Because a button that does not respond to interaction feels broken. Those states are how a person knows the control registered their click, and they are not optional polish.
Why a brightness filter for hover?
It works with any background — a solid colour, a gradient, an image — and needs no second colour to keep in sync when the first one changes.
What about the focus state?
The preview is a real button element, so tabbing to it shows the focus ring the browser provides. Never remove that ring without providing a clearly visible replacement — keyboard users depend on it entirely.
Should I use a button element or a link?
A button for an action, a link for navigation. Style them however you like, but the underlying element must match what it actually does — screen readers and keyboard behaviour follow the element, not the appearance.
What size should a button be?
At least 44 by 44 pixels for touch. That is the minimum a finger can reliably hit, and smaller targets cause real frustration on phones.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Box Shadow Generator
This box shadow generator stacks multiple layers with a live preview.
CSS Border Radius Generator
This border radius generator sets each corner and writes the shortest valid CSS.
CSS Gradient Generator
This gradient generator builds linear, radial and conic gradients with a live preview.