About the CSS Button Generator
CSS Button Generator designs a button and writes the CSS for it. Set the text, colour (or a two-colour gradient), text colour, corner radius, padding, font size and weight, border, shadow and how far the button lifts when the pointer is over it, and watch the live preview. The page produces the full CSS: the normal style, a hover rule with a lift, brighter colour and larger shadow, an active rule and a keyboard focus outline. Copy it into your stylesheet and use the class on a link or button element.
Updated October 2026
How to use the CSS Button Generator
- 1Type the button text.
- 2Choose the colours, or switch the gradient on and pick two.
- 3Set the radius, padding, font size, weight, border and shadow.
- 4Set the hover lift and check the preview.
- 5Copy the CSS and apply the class to your button.
Anatomy of a good button
A good button is obviously clickable, easy to read and easy to tap. Padding gives it a generous target, at least 44 pixels tall on phones, and a contrasting colour makes it stand out. A hover or focus change confirms that it will respond, and a pressed state gives feedback.
Choosing the look
Keep your primary button bold and consistent across a site, and make secondary buttons quieter. Use a gradient sparingly, since flat colours are cleaner, and keep the shadow subtle.
- Primary: strong colour, white text
- Secondary: outline, transparent background
- Padding of 12 to 16 px vertically, 24 to 32 px sideways
- Radius 8 to 12 px for friendly, 999 px for pills
Accessibility
Check the contrast between text and background and keep the focus outline. Do not rely on colour alone to show state. For disabled buttons use the disabled attribute and a lower opacity, and explain why an action is unavailable.
Related tools
Add depth with the Box Shadow Generator, shape corners with the Border Radius Generator, build backgrounds with the CSS Gradient Generator and verify the text with the Color Contrast Checker. The Neumorphism Generator offers a soft style.
Features
- Solid or gradient background
- Radius, padding, font and border controls
- Shadow and hover lift
- Hover, active and focus styles included
- Live preview
- Private: nothing is uploaded
Frequently asked questions
How do I use the CSS?
Paste it into your stylesheet and give your button or link the class button, for example <a class="button" href="#">Click me</a>. Change the class name by editing the selector.
Can I use it on a link and a button element?
Yes. The CSS sets display, text-decoration and cursor, so it looks the same on a, button and input elements.
What is the hover lift?
On hover the button moves up a few pixels and its shadow grows, which gives a pressed-from-below effect. Set it to 0 for no movement.
Why is there a focus style?
Keyboard users need to see which control is selected. The focus-visible outline appears only when navigating with the keyboard.
How do I make a round pill button?
Raise the corner radius to the maximum, or set border-radius to 999px in the CSS.
Is the gradient supported everywhere?
Yes. The linear-gradient function works in all current browsers.
Is the contrast enough?
Check the text colour against the button colour. Aim for a ratio of at least 4.5 to 1, which you can test with the Color Contrast Checker.
How do I make a button full width?
Add display: block and width: 100% to the class, or put the button in a flex container with a stretch alignment.
Can I add an icon?
Yes. Put the icon inside the button element next to the text and give the button display: inline-flex, a gap and align-items: center.
How do I make the button animate more?
Add a longer transition time, change the transform on hover to a scale, or add a colour change. Keep movements small so that they feel responsive.
Is my design uploaded?
No. It runs in your browser.