CSS Button Generator
Design CSS buttons visually for free — set colours or a gradient, padding, corner radius, border, shadow, font and letter spacing, pick a hover effect (darken, lift, fill, press or glow), and copy clean CSS and HTML. Six presets to start from, with hover, active and keyboard-focus states included.
100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.
How to create a CSS button
- Start from a preset, or set your own colours.
- Adjust size, padding, radius, border and shadow.
- Choose a hover effect and hover over the preview to test it.
- Copy the CSS and HTML into your project.
What you can use it for
- Create call-to-action buttons for landing pages
- Match buttons to your brand colours
- Prototype button styles for a design system
- Learn how hover and focus states are written in CSS
More free tools
Building for the web?
Format, minify, convert and generate code with our free, private developer tools.
See all free tools →Frequently asked questions
How do I use the generated CSS?
Paste the CSS into your stylesheet and add class="btn" to any link or button. Rename .btn if it clashes with an existing class.
Does it work on <button> elements?
Yes. The CSS works on both <a> and <button> elements — for a <button>, replace the link tag in the HTML.
Is the button accessible?
The code includes a visible keyboard-focus outline. Keep strong contrast between text and background — check it with our Contrast Checker.
Can I make a gradient button?
Yes — tick Gradient and the background blends from the first colour to the second. Try the Gradient preset.
Is the code free to use?
Yes, for personal and commercial projects.