Button Generator

📖 Tool Introduction

Button Generator is a visual online tool that lets front-end and product designers craft polished buttons without writing a single line of CSS by hand. A great-looking button usually hides a tangle of decisions: solid background or two-color gradient, what the text color should be, how round the corners, how much padding, whether to add a border, and how heavy the font weight. This tool turns all of those into color wells and sliders, then renders a real button on the stage above, so every tweak you make transforms the button instantly, and what you see is exactly what you get. The background supports both a flat color and a 135 degree two-color gradient, switchable with one checkbox; the text and border colors are picked independently; the corner radius slides from sharp square corners all the way to a pill shape above 24 pixels; padding and font size are tuned with precise sliders; and the label itself is typed directly, supporting mixed Chinese and English. Once it looks right, the code box at the bottom assembles a clean .btn stylesheet containing display, padding, border, border-radius, font-size, font-weight, color, background and cursor, ready to copy or save as a .css file. Everything runs locally in your browser, fully offline. Buttons are the single most repeated interactive element on any product, and a small change in radius, padding or weight can shift the whole feel from playful to corporate in an instant. By exposing every relevant property on one screen and rendering the result live, the tool removes the guesswork between editing a stylesheet and refreshing a page, so you can prototype a primary action, a secondary pill and a ghost outline all in the space of a minute and then ship the exact CSS your design calls for.

✨ Key Features

• Live preview: the button on stage updates as you drag, what you see is what you get
• Two-color gradient: a 135 degree linear blend when enabled, or a flat solid color
• Free radius: a 0 to 40px slider gliding from square corners to a pill button
• Border and weight: adjustable border width and color, plus a bold toggle
• Clean code: outputs a complete .btn stylesheet ready to paste
• Example and download: a warm gradient preset loads instantly, code saves to a file

📝 How to Use

1. Type the label you want into the Button Label field
2. Pick background color one (and two, used when the gradient is on)
3. Drag the radius, padding, font-size and border-width sliders to fine-tune
4. Set the text color, border color and bold toggle as needed
5. Click Copy Code to paste it in, or Download CSS to save it

⚠️ Notes

• Readability: keep enough contrast between the text color and the background
• Gradient switch: when gradient is off, only background color one is used
• Zero border: at width 0 the emitted border uses transparent as a placeholder
• Ranges: radius 0 to 40, padding 4 to 40, font size 12 to 28, border width 0 to 8
• Local only: all styling math and code generation run in your browser