🔘 Button Maker: Free CSS Button Generator with Live Preview
By Shihab Mia · Updated 2026-06-27
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 maker turns the fiddly job of hand-writing button CSS into direct, visual control. A button is one of the most reused elements on any website, yet getting it right by hand means juggling background-color, padding, border-radius, font-size, border, and box-shadow until the proportions feel balanced. This button generator maps every slider and color picker to a single CSS declaration, and the preview shows the combined result instantly so you can judge spacing, color, and contrast with your own eyes before you ever touch a code editor.
The core box-model rules are simple once you see them in action. 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, which is why most buttons set horizontal padding roughly double the vertical to look balanced. 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 painting 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, plus 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 is the common pattern, because it signals that the element is clickable without changing its identity. Many designers also nudge the button up a pixel or two on hover and deepen the shadow to create a subtle lift, an effect you can mimic by pairing the hover color with a stronger shadow.
Accessibility is not optional for a button. 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 and 3 to 1 for large text, in line with WCAG 2.2. Keyboard users rely on a visible focus ring, so keep a clear :focus-visible outline rather than removing it, and never use color alone to signal a primary action. Touch targets should be at least 44 by 44 CSS pixels so the button is easy to tap on a phone, which usually means generous padding rather than a tiny label.
Reuse and maintainability come from putting styles in a class. The generated 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 output is plain, dependency-free CSS, so it drops cleanly into a stylesheet, a React or Vue component, a Tailwind project as a custom utility, or a CMS theme such as WordPress or Webflow. It works on a real <button> element or an anchor styled as a button, and nothing here locks you into a framework.
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, padding, and shadow.
- Generating consistent button code to reuse across a site by applying one .button class.
- Building matching primary, secondary, and outline button variants for a small design system.
- Creating an on-brand CTA button for an email signature, newsletter, or marketing page.
- Teaching or learning how padding, border-radius, border, shadow, 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.
- Check that the text and background colors have enough contrast to stay readable.
- 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.
A small ghost button for a secondary action: transparent-feeling light fill, dark text, tight padding, subtle radius.
- Set background-color to a very light gray such as #f1f5f9 and color to #0f172a.
- Reduce padding to about 8px 16px and font-size to 14px for a compact button.
- Set border-radius to 6px and leave the border at 0 with no shadow.
- Pick a slightly darker hover background such as #e2e8f0 for gentle feedback.
Result: background-color: #f1f5f9; color: #0f172a; padding: 8px 16px; font-size: 14px; border-radius: 6px; border: 0; plus a :hover rule setting background-color: #e2e8f0.
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 |
Button size presets (padding and font-size)
| Size | Padding | font-size | Typical use |
|---|---|---|---|
| Small | 8px 16px | 14px | Secondary actions, toolbars, tables |
| Medium | 12px 24px | 16px | Default body and form buttons |
| Large | 16px 32px | 18px | Hero call-to-action and landing pages |
| Touch-friendly | 14px 28px | 16px | Mobile, at least a 44px tall target |
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 for normal text so the button stays accessible under WCAG.
- 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.
- Removing the focus outline. Stripping outline to zero with no replacement leaves keyboard users with no way to see which button is selected. Keep a visible :focus-visible ring instead of deleting it.
- 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.
- Tap targets that are too small on mobile. A cramped button with tiny padding is hard to tap on a phone. Keep the button at least 44 by 44 CSS pixels by using generous padding so it is comfortable to press.
Glossary
- CSS button
- An HTML button or link styled with CSS properties like background, padding, and border-radius.
- Padding
- The space between a button label and its edges, written as vertical then horizontal values.
- border-radius
- The CSS property that rounds an element corner, 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.
- Focus state
- The styling shown when an element is selected by keyboard, written with :focus or :focus-visible.
- Transition
- A CSS property that animates a change such as color over a set duration so it fades smoothly.
- Contrast ratio
- A measure of how different two colors are in brightness, used to judge text readability.
Frequently asked questions
What is a button maker?
A button maker 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.
How do I make an accessible button?
Keep the text-to-background contrast ratio at 4.5 to 1 or higher, keep a visible focus outline for keyboard users, and make the tap target at least 44 by 44 CSS pixels. Use a real button or anchor element so screen readers announce it correctly.
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.
How do I create a gradient button?
Swap the solid background-color for a linear-gradient, for example background: linear-gradient(135deg, #2563eb, #7c3aed). Pick a base color in this tool to set your sizing and spacing, then replace background-color with your gradient in the copied CSS.
Will the copied code work in any framework?
Yes. The output is plain, dependency-free CSS and HTML, so it drops into a stylesheet, a React, Vue, or Svelte component, a Tailwind project as a custom class, or a CMS theme such as WordPress or Webflow without changes.
How do I center a button on the page?
Wrap it in a container and use text-align: center for an inline-block button, or set the container to display: flex with justify-content: center. The button class itself controls its own look, not its position.
Is this button generator free and private?
Yes. It is completely free with no sign-up, and it runs entirely in your browser. Nothing you design is uploaded or sent to a server, so your button styles stay on your own device.