Tiny Toolkit

CSS Button Generator

Design a custom CSS button by tweaking colours, 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.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

What CSS properties can I customise?
Background colour, text colour, font size, font weight, padding, border-radius, border, box-shadow, and hover-state colours are all configurable.
Does the output include the :hover state?
Yes — the generated CSS includes a :hover rule with the hover colour 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

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.