CSS buttons β move a slider, watch the code change
A button needs about ten lines of CSS. The difficulty is not the syntax but remembering which value at which number produces the look you had in mind. Here you push things around, look at the result, and take the code when it looks right.
What this generates is three rules: the button itself, what happens on hover, and what happens when someone arrives by keyboard. The preview and the code below it are rendered from the same list of declarations, so what you see is what gets copied.
There are two ways to change things. Pick a preset for a starting point, then adjust with the sliders. Presets apply over the defaults rather than over the current state, so nothing carries over from the preset you tried before.
What each value does
| Property | Effect | A sensible range |
|---|---|---|
| padding | space between text and edge | 12px vertical, 24px horizontal |
| border-radius | corner rounding | 8px is normal; 50px+ gives a pill |
| box-shadow | shadow | about 8px of blur to look slightly lifted |
| box-shadow (0 blur) | a solid edge | 4px down, 0 blur reads as thickness |
| transition | how long a change takes | 0.2s; without it changes snap |
| transform: scale | size on hover | 1.05 β more starts to feel jumpy |
With a gradient, background-color cannot change the hover
A gradient lives in the background shorthand, and background-color is only one part of that. Set a background-color on hover while a gradient is applied and nothing happens: the gradient is still there, on top.
So when a gradient is on, this tool leaves background-color out of the hover rule entirely and changes only the scale and the text colour. To change the gradient itself on hover you have to rewrite the whole background.
People arriving by keyboard need to see the button too
Hover styling does nothing for someone tabbing through a page. To know where they are they need a focus indicator. Browsers draw one by default β and button styling very often removes it with outline: none.
This tool emits a :focus-visible rule alongside the rest. That selector matches keyboard navigation but not mouse clicks, so keyboard users get the indicator without a ring appearing every time anyone clicks.
The ring takes the button's background colour, falling back to the border colour for an outline button and to the text colour if there is no border β a transparent focus ring is the same as no focus ring.
Things to check after pasting
- β’The class is named .button. Rename it if your project already uses that.
- β’text-decoration: none is included for when the button is an <a>. Harmless on a <button>.
- β’A <button> element does not inherit font-family, so you may need font-family: inherit.
- β’Check the contrast between text and background β light text on a light fill is hard to read.
- β’A :disabled state is not generated. Add one if the button can be disabled.
Frequently asked questions
The preview and the pasted code look different.
They come from the same declaration list, so the values are identical. A difference almost always means other CSS on your page is overriding it β check which rule wins in developer tools.
There is no box-shadow in the code.
With both the vertical offset and the blur at zero there is nothing to draw, so the line is omitted. Raise either slider and it appears.
I use Tailwind. How does this help?
Either read the values off and translate them into utility classes, or drop the CSS into a global stylesheet as-is. Just avoid a class-name collision.
Is my button saved?
No. Everything is built in your browser and a refresh returns to the starting state.