Free CSS Button Generator

01Overview

What does the CSS button generator do?

Buttons are the most important clickable elements on a website. They carry your calls to action, so they need to look clickable, match your brand and feel responsive when hovered.

This free CSS button generator lets you design a button visually and copy clean CSS. Adjust text, colours, hover background, font size, padding, border radius, border, shadow and font weight, and see a live preview as you go.

The output is plain CSS with no framework required, so it works in WordPress, Elementor, Shopify, Webflow or hand-coded sites.

Quick answer

Set your colours, padding, radius and hover state above, then copy the generated CSS. Apply the class to any link or button element on your site, for example a href with class="btn".

Free, no sign-up
Live preview
Hover state included
Plain CSS, no framework

02How to use

How to use the CSS Button Generator

Start from your brand colour and adjust until the button feels right.

Write the button text
Use the real call to action, such as "Get a free quote".
Set colours
Text colour, background and a slightly darker hover background.
Adjust size and shape
Padding, font size, border radius, border and shadow.
Copy the CSS
Paste into your stylesheet and add the class to your buttons.

03How it works

What the generated CSS looks like

Clean, readable CSS you can edit later.

Four button styles from one generator

Get a free quotePrimary, filled

See pricingSecondary, outline

Book a callPill

Learn moreText link

Generated CSS

.btn {
background: #FF5500; color: #FFFFFF;
padding: 14px 28px; border-radius: 10px;
font-size: 16px; font-weight: 600;
border: 0; cursor: pointer; transition: background .2s;
}
.btn:hover { background: #E64C00; }

Add a :focus-visible style as well so keyboard users can see which button is selected.

Worked example

A primary call-to-action button.

Background: #FF5500
Hover: #E64C00
Padding: 14px 28px
Radius: 10px
Contrast: Check with contrast checker

A bold, rounded button that stands out from a blue page while staying on brand.

04Reference

Button sizing guide

Comfortable sizes for touch and mouse.

Property	Recommended	Why
Minimum tap target	44 x 44 px	Easy to tap on phones
Vertical padding	12 to 16 px	Comfortable click area
Horizontal padding	24 to 32 px	Gives the label room
Font size	15 to 18 px	Readable on all screens
Border radius	6 to 12 px, or fully rounded	Match your brand style
Text contrast	At least 4.5:1	WCAG AA for normal text

05Tips

Button design tips that improve clicks

A good button is obvious, specific and consistent.

Do this

Use action words"Book my consultation" beats "Submit". Tell people what happens next.
One primary styleUse your boldest button style for the main action only, and a quieter style for secondary actions.
Show feedbackHover, focus and active states reassure people the button works.
Leave white spaceSpace around a button draws the eye to it.

Button mistakes to avoid

Low-contrast textWhite text on a pale brand colour often fails accessibility.
Tiny tap targetsSmall buttons cause mis-taps and frustration on mobile.
Removing focus outlinesKeyboard users need a visible focus state.
Too many equal buttonsThree bright buttons side by side means none stands out.

06FAQ

Frequently asked questions

How do I create a button in CSS?

Style a link or button element with background, colour, padding and border-radius, and add a :hover rule. The generator writes this CSS for you.

How do I add the CSS to WordPress?

Paste it into Appearance, Customize, Additional CSS, or into Elementor's custom CSS, then add the class to your button.

What is a good button size?

At least 44 x 44 pixels for touch, with about 12 to 16px vertical and 24 to 32px horizontal padding.

Should buttons be rounded or square?

Either works. Match your brand: rounded feels friendly, square feels formal. Be consistent across the site.

What colour should a call-to-action button be?

A colour that contrasts with the page and is not used for much else, so it stands out.

Does the CSS need a framework?

No. It is plain CSS and works anywhere.

The Big Growth team

Want a website that looks this polished?

We design and build fast, accessible, conversion-focused websites on WordPress and custom stacks. Explore our web development services.

Talk to our design team Browse all free tools

What does the CSS button generator do?

How to use the CSS Button Generator

Write the button text

Set colours

Adjust size and shape

Copy the CSS