What CSS properties can I customise?

Background color, text color, font size, font weight, padding, border-radius, border, box-shadow, and hover-state colors are all configurable.

Does the output include the :hover state?

Yes. The generated CSS includes a :hover rule with the hover color you configure in the tool.

Does it output an HTML snippet as well as the CSS?

Yes. The tool outputs both the CSS rule and a ready-to-use HTML element.

CSS Button Generator — Custom Buttons with Live Preview

Design a custom CSS button by tweaking colors, padding, font size, border-radius, border, and box-shadow through visual controls. The output includes both the complete CSS rule with a :hover state and a ready-to-use HTML snippet. Helpful for quickly prototyping button styles without writing CSS from scratch.

Frequently Asked Questions

What CSS properties can I customise?: Background color, text color, font size, font weight, padding, border-radius, border, box-shadow, and hover-state colors are all configurable.
Does the output include the :hover state?: Yes. The generated CSS includes a :hover rule with the hover color you configure in the tool.
Does it output an HTML snippet as well as the CSS?: Yes. The tool outputs both the CSS rule and a ready-to-use HTML <button> element.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.