for actions on the page; for links that navigate to another page.

CSS Button Generator

To create a CSS button, set the text, colours, padding, border radius, border, shadow, font and hover effect, and copy the HTML and CSS. The preview shows normal, hover and focus states, with an accessible contrast check.

Read the guide

Free
No signup
Runs in your browser

Text

BackgroundHover backgroundText colourBorder colour

Horizontal padding: 24px

Vertical padding: 12px

Corner radius: 10px

Font size: 16px

Border width: 0px

Font weight

Shadow

Text contrast 3.48:1 fails WCAG AA.

HTML

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

CSS

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background: #2E9E1F;
  border: 0px solid #1A6E12;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn:hover {
  background: #3DBF2D;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid #3DBF2D;
  outline-offset: 2px;
}

Loading tool…

How to use CSS Button Generator

1Type or paste your input into the CSS Button Generator.
2Choose any options you need.
3See the result update instantly.
4Copy the result or download it.

CSS Button Generator: questions people ask

Should I use <button> or <a>?

<button> for actions on the page; <a> for links that navigate to another page.

Is a focus style needed?

Yes. Keyboard users need a visible focus outline, which the generated CSS includes.

Is my data uploaded when I use the CSS Button Generator?

No. The CSS Button Generator runs entirely in your web browser, so your text and numbers stay on your device and work even on a slow connection.

Does the CSS Button Generator work on iPhone, Android and Mac?

Yes. The CSS Button Generator runs in any modern browser (Safari, Chrome, Edge or Firefox) on iPhone, iPad, Android phones, Mac, Windows and Chromebook. There is no app to install.

Is the CSS Button Generator free?

Yes. The CSS Button Generator is free with no signup, no watermark and no daily limit.