Micro Tools
Advertisement

Button generator

Design a CSS button with sliders for padding, radius, colors, border and shadow. Preview it live, then copy the HTML and CSS together.

Button style

Every control updates the preview instantly.

Preview and code
Advertisement

Anatomy of a good button

Great buttons balance four things: enough padding to feel tappable (at least 12px vertical), a radius that matches your brand, strong text contrast, and a subtle shadow or border for depth. This generator exposes each one separately so you can feel how they interact.

Why the code includes a hover-ready class

The output uses a .my-btn class instead of inline styles so you can extend it: add .my-btn:hover for a darker background, .my-btn:active for a press effect, and .my-btn:disabled for the grayed state, all in one maintainable block.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Button Generator FAQs

What padding makes a button feel premium?
Generous horizontal padding, around 28 to 40px, with 12 to 16px vertical. Wide buttons feel confident and are easier to tap on mobile, where the minimum touch target is 44px tall.
Should buttons have borders or shadows?
Pick one source of depth. A soft shadow suits modern minimal UIs; a 1 to 2px border suits outlined and retro styles. Using both at full strength usually looks heavy.
How do I check text contrast on my button?
White text needs a background darker than roughly #767676 for WCAG AA at large sizes. If your brand color is light, use dark text on it instead of forcing white.
Can I make a pill button?
Yes, set corner radius to half the button height or just max it out at 40px here. Pill buttons suit tags and toggles; keep standard rounded rectangles for primary CTAs so the hierarchy stays clear.
How do I add a hover effect to the generated CSS?
Duplicate the .my-btn block as .my-btn:hover and darken the background by about 10 percent. Add transition: background .2s to the base class for a smooth color shift.
Advertisement