CSS Button Generator

Design a button visually and copy production-ready CSS.

Free
No sign-up
Nothing is sent or stored

Button text

Background

Text colour

Gradient background

Corner radiuspill

Horizontal padding24px

Vertical padding12px

Font size16px

Shadow30%

Font weight

Hover effect

Border0px

Uppercase text

CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #16a34a;
  border: none;
  border-radius: 999px;
  box-shadow: 0 5px 15px rgba(22, 163, 74, 0.30);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.btn:focus-visible {
  outline: 3px solid #16a34a;
  outline-offset: 3px;
}

HTML

<button class="btn" type="button">Get started</button>

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved.

How to use the CSS Button Generator

Set the text, colours and shape.
Adjust padding, font, shadow and hover effect — hover the preview to test it.
Copy the CSS and HTML into your project.

What does this tool do?

Buttons are the most-clicked element on most sites, so they deserve care: enough padding to tap on a phone, strong colour contrast and a clear hover and focus state.

The generated CSS includes a visible :focus-visible outline so keyboard users can see where they are.

Why use it?

Live hover preview.
Gradients and borders.
Accessible focus style included.

Privacy

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved. There's no account to create and nothing to install.

Last reviewed October 4, 2026 by the M2Toolkit team.

Other tools people use alongside the css button generator.

How to use the CSS Button Generator

What does this tool do?

Why use it?

Privacy

Related tools