Match the button treatment to its surroundings

A Solid button carries its own background, while Outline and Ghost expose the surface beneath them in the normal state. Place the exported button on the actual page background before choosing the label color. A white label that works on a filled button may disappear when the same settings are used for a transparent one.

For Solid, the generator darkens the selected background for hover and active. Outline and Ghost instead use pale mixtures of that color with white. The text color stays unchanged, so inspect those pale states especially carefully when using light text. The Normal, Hover, and Active tabs let you hold each appearance still for comparison.

Check the label in every state

Solid uses a filled background. Outline starts with a transparent background and a visible border. Ghost starts with both background and border transparent. Text Color controls the label in all three.

Choose background, text, and border colors as six-digit HEX values.
Set font size, padding, border width, and corner radius in px, rem, or em. Zero and positive decimals are accepted.
Use the Hover and Active preview tabs. Make sure the label stays readable as the background changes.
Copy the rules for .button, :hover, :active, and :focus-visible together.

The hover rule lifts the button by 1px; the active rule returns it to its original position. Keyboard focus has a separate outline. The output provides styling only: it adds no click action or disabled-state styling.

Connect the generated class to a real control

<button type="button" class="button">Save draft</button>

Use this HTML pattern for an action, then connect the click behavior in your application. In React, use className instead of class. For navigation, style an anchor tag with the same class instead of a button but only when the control genuinely navigates to a new URL; a link styled as a button that actually submits a form or triggers JavaScript breaks keyboard and screen-reader expectations, since links and buttons carry different roles. Keep the base rule and all three state selectors together; if you rename .button, rename it in every selector.

Try the longest real label before finalizing padding. The output uses line-height: 1, so a wrapped label deserves a separate check. The generator also provides no disabled or loading appearance; add those states alongside the application's behavior when the action can be unavailable or pending.

Test keyboard focus on the exported control by tabbing to it, not just clicking. That's the only way to see the :focus-visible outline this generator writes for you. Browsers already suppress that outline on a mouse click and show it on keyboard navigation automatically, so there's no extra logic to add; the outline just needs enough surrounding space and enough contrast against the page to actually be visible once it appears.