Button Generator

How to use it

1. Type the button text and set padding X, padding Y, border radius and font size in pixels.
2. Pick the background and text color, then the border width and its color from the color swatches.
3. Choose a shadow level (small, medium, large or none) and a transition time in milliseconds.
4. Pick the hover background and hover text color, then hover the preview to check the interaction.
5. Press Generate CSS and copy the stylesheet plus the HTML snippet out of the report.

Common use cases

• Design review - restyle a call-to-action button for a landing page without touching a build.
• Hand-off mockups - paste ready-made CSS into a ticket so an engineer sees exactly what you mean.
• Dark mode check - swap background and text colors side by side until contrast looks right.
• Teaching CSS - show how padding, radius and box-shadow interact on a real element.

Why it stays private

The generator is plain client-side JavaScript: controls update a live button and a CSS string. No styles are sent anywhere, and the tool works offline.

FAQ

Q: Which browsers does the generated CSS support? A: The output uses long-standard properties such as padding, border-radius, box-shadow, transition and the :hover selector. It works in current desktop and mobile browsers.

Q: How do I make a pill button? A: Set the border radius larger than half the button height, for example 999 px, and both ends become fully round.

Q: What does the transition control? A: It sets how long the hover change takes, in milliseconds. Values from 150 to 250 ms feel responsive, while anything over 400 ms starts to feel sluggish on click.

Q: Is the preview an image? A: No. The preview is a real button element with the generated CSS applied, so hover and text wrapping behave exactly as they will on your page.