CSS Button Generator — Style and Copy
Style the perfect button in seconds. Tune padding, corners, and colors, preview the hover state live, then copy clean CSS with normal and hover rules free.
Free, no signup needed. Runs 100% in your browser.
Loading…
How to use this tool
- Type your button text and tune padding and corner radius.
- Pick background and text colors and toggle the shadow.
- Preview the hover state, then copy or download the CSS.
Frequently asked questions
What does the copied CSS include?
A normal rule with your padding, radius, colors, and shadow, plus a hover rule with an automatically darkened background.
How do I use the CSS on my site?
Paste the rules into your stylesheet and add the class name to any button or link element.
Is it free?
Yes, free with no signup. Everything runs in your browser.
Related tools
Need a website for this?
Describe your idea once and BYOB plans, builds, and deploys your site.
Embed this tool
Paste this snippet to show this tool on your own site.