🔘 CSS Button Generator: Build and Copy Button Styles
By ToolNimba Editorial Team · Updated 2026-06-20
Adjust the controls. The preview, CSS, and HTML update live.
This CSS button generator lets you design a polished button visually and copy the exact code to paste into any project. Pick the text, background and text colors, corner radius, padding, font size, border, drop shadow, and a hover color, then watch a real button update live as you tweak each control. When it looks right, one click copies clean, ready-to-use CSS and matching HTML, and everything runs in your browser with nothing sent to a server.
What is the CSS Button Generator?
A button is one of the most reused elements on any website, yet getting its CSS right by hand means juggling background-color, padding, border-radius, font-size, border, and box-shadow until the proportions feel balanced. This button maker turns that guesswork into direct manipulation: every slider and color picker maps to one CSS declaration, and the preview shows the combined result instantly so you can judge spacing and contrast with your own eyes.
The core rules are simple. Padding is written as two values, vertical first and horizontal second, so 12px 24px means 12px above and below the text and 24px on each side. Border-radius rounds the corners, where 0 is a sharp rectangle and a large value like 9999px produces a fully rounded pill. The border shorthand combines width, style, and color, so 2px solid #1d4ed8 draws a two-pixel solid blue outline, while a width of 0 means no border at all. A box-shadow adds depth by drawing a soft, semi-transparent shadow beneath the button so it appears lifted off the page.
Hover state is what makes a button feel interactive. The generator outputs a separate .button:hover rule that swaps the background color when the pointer is over the button, and a short transition so the change fades smoothly rather than snapping. You can preview this directly by hovering the live button. Choosing a hover color slightly darker or lighter than the base color is the common pattern, because it signals that the element is clickable without changing its identity.
Accessibility and reuse are worth keeping in mind. Always pair a background color with a text color that has enough contrast to stay readable, generally a contrast ratio of at least 4.5 to 1 for normal text. The class is named .button so you can apply it to as many buttons or links as you like, and because the styles live in a class rather than inline attributes, you can later override one property without rewriting the whole rule. The generated code is plain CSS with no framework or dependency, so it drops cleanly into a stylesheet, a component, or a CMS theme.
When to use it
- Quickly styling a call-to-action button for a landing page without writing CSS from scratch.
- Prototyping several button looks side by side to compare colors, radius, and padding.
- Generating consistent button code to reuse across a site by applying one .button class.
- Teaching or learning how padding, border-radius, border, and hover states shape a button.
How to use the CSS Button Generator
- Type your button label and pick the background and text colors.
- Adjust the radius, padding, font size, border, and shadow sliders until the preview looks right.
- Choose a hover color and hover the live preview to test the interaction.
- Click Copy CSS or Copy HTML to grab the generated code and paste it into your project.
Formula & method
Worked examples
A primary blue call-to-action: blue background, white text, 8px radius, 12px by 24px padding, 16px text, soft shadow, darker blue on hover.
- Set background-color to #2563eb and color to #ffffff for strong contrast.
- Set padding to 12px 24px, border-radius to 8px, and font-size to 16px.
- Turn on the drop shadow to lift the button off the page.
- Set the hover background to #1d4ed8 so it darkens slightly when pointed at.
Result: background-color: #2563eb; color: #fff; padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 14px 0 rgba(0,0,0,0.18); plus a :hover rule setting background-color: #1d4ed8.
An outlined pill button: white background, blue text, 2px blue border, fully rounded corners, no shadow.
- Set background-color to #ffffff and color to #1d4ed8.
- Set the border width to 2px with a blue border color.
- Push the radius slider to its maximum so the corners form a pill shape.
- Turn off the drop shadow for a flat, minimal look.
Result: background-color: #fff; color: #1d4ed8; border: 2px solid #1d4ed8; border-radius: 60px; box-shadow: none.
What each control changes in the generated CSS
| Control | CSS property | Effect |
|---|---|---|
| Background color | background-color | Fills the button body |
| Text color | color | Sets the label color |
| Border radius | border-radius | 0 is square, large values round to a pill |
| Padding | padding | Vertical then horizontal space around the text |
| Font size | font-size | Size of the label text in pixels |
| Border width and color | border | Outline thickness, style, and color |
| Drop shadow | box-shadow | Soft shadow that lifts the button |
| Hover color | background-color on :hover | New background when the pointer is over it |
Common button radius styles
| border-radius | Look | Best for |
|---|---|---|
| 0px | Sharp rectangle | Minimal or technical interfaces |
| 4px to 8px | Slightly rounded | Most general-purpose buttons |
| 12px to 20px | Soft rounded | Friendly, modern designs |
| 9999px | Full pill | Tags, chips, and call-to-action buttons |
Common mistakes to avoid
- Low contrast between text and background. A light text color on a light background, or dark on dark, makes the label hard to read. Aim for a contrast ratio of at least 4.5 to 1 so the button stays accessible.
- Forgetting the hover state. A button with no visible change on hover feels unresponsive. Set a hover color and a short transition so users get clear feedback that the element is clickable.
- Writing padding values in the wrong order. When padding has two values, the first is vertical and the second is horizontal. Swapping them gives a tall, narrow button instead of the wide one you expected.
- Using inline styles instead of a class. Styling each button with inline attributes makes them hard to update and inconsistent. Use the generated .button class so every button shares one rule you can change in one place.
Glossary
- CSS button
- An HTML button or link styled with CSS properties like background, padding, and border-radius.
- Padding
- The space between a button’s text and its edges, written as vertical then horizontal values.
- border-radius
- The CSS property that rounds an element’s corners, from a sharp rectangle to a full pill.
- box-shadow
- A property that draws a shadow around an element to give it a sense of depth.
- Hover state
- The styling applied while the pointer is over an element, written with the :hover pseudo-class.
- Contrast ratio
- A measure of how different two colors are in brightness, used to judge text readability.
Frequently asked questions
What is a CSS button maker?
It is a visual tool that builds the CSS and HTML for a styled button. You set the text, colors, radius, padding, border, shadow, and hover color with controls, see a live preview, and copy the finished code instead of writing it by hand.
How do I add a hover effect to a button in CSS?
Write a separate rule using the :hover pseudo-class, such as .button:hover { background-color: #1d4ed8; }, and add a transition on the base rule so the change fades smoothly. This generator outputs both rules for you automatically.
How do I make a rounded or pill-shaped button?
Increase the border-radius. Small values like 8px give gently rounded corners, while a very large value such as 9999px rounds the ends fully into a pill shape. Slide the radius control to the maximum for the pill look.
Can I use the generated button for a link instead of a real button?
Yes. Apply the same .button class to an anchor tag, for example <a class="button" href="...">. The class includes display: inline-block and text-decoration: none so a link looks identical to a button.
Why does my button text look too cramped or too wide?
That is the padding. The first value adds space above and below the text and the second adds space on the left and right. Increase the horizontal padding for a wider button and the vertical padding for a taller one.
Is this button generator free and private?
Yes. It is completely free and runs entirely in your browser. Nothing you design is uploaded or sent to a server, so your button styles stay on your own device.