The CSS Button Generator lets you design a button visually and copy the CSS. Set the label, choose a solid colour or a gradient, adjust padding, font size and weight, corner radius, border, and shadow, and pick a hover effect — all with a live preview you can hover to test. Start from a preset like Primary, Gradient, Outline, or Pill and fine-tune from there.
The tool writes both the base .button rule and a matching :hover rule, including a smooth transition, so the copied CSS behaves exactly like the preview. Everything runs in your browser.
How to use the CSS button generator
- Pick a preset, then set the button label and choose a solid or gradient background.
- Adjust padding, font size and weight, corner radius, and optionally a border and drop shadow.
- Choose a hover effect (darken, lift, or grow) and hover the preview to test it.
- Copy the generated CSS and apply the .button class to your element (rename it if you like).
Building a button with CSS
A button’s look comes from a handful of properties: padding controls its size, background sets its fill (a solid colour or a linear-gradient), border-radius rounds the corners, and font-size and font-weight shape the label. Adding cursor: pointer and a subtle box-shadow makes it feel clickable. This generator combines these into a single .button rule you can drop into any project.
Hover effects and transitions
A good button responds when you point at it. The hover options here cover the most common patterns: “darken” dims the background with a brightness filter (which works for both solid and gradient fills), “lift” nudges the button up with a stronger shadow to suggest elevation, and “grow” scales it up slightly. A transition of about 0.2s makes the change feel smooth rather than abrupt, and the tool includes it automatically.
Accessibility tips
Make sure the text colour has enough contrast against the background — aim for a contrast ratio of at least 4.5:1 for normal text. Keep the button large enough to tap comfortably on touch screens (around 44px tall is a common target), which you can achieve with adequate vertical padding. Because the generated styles apply to a real element, remember to use a <button> tag so it stays keyboard-focusable and announces itself to screen readers.
Frequently Asked Questions
How do I add a hover effect to a CSS button?
Define a :hover rule that changes the button’s appearance, and add a transition to the base rule so the change animates. This generator writes both for you — pick darken, lift, or grow, and it outputs the matching .button:hover block.
How do I make a gradient button?
Switch the background to “Gradient”, choose the two colours and an angle, and the tool sets background: linear-gradient(...). Gradient buttons pair well with the “lift” hover effect.
How do I make a pill or rounded button?
Increase the border radius. A radius equal to or greater than half the button’s height makes the ends fully round — the Pill preset does this for you.
How do I make an outline (ghost) button?
Use the Outline preset, or set a transparent-looking background, add a border, and match the text colour to the border. It gives a lighter, secondary-action look.
Should I apply the styles to a <button> or an <a>?
Use a <button> element for actions and an <a> for navigation. Either works with the generated CSS, but a real <button> is keyboard-focusable and accessible by default.
Do these button styles work in all browsers?
Yes. Every property used — background gradients, border-radius, box-shadow, transitions, and :hover — is supported in all modern browsers without vendor prefixes.