← All toolsFree — no signup

Button CSS Generator

Set colours, padding, radius, and font size to design a button and copy its CSS, with a live preview.

Button CSS Generator

Button label

Background

Text color

Padding X: 20px

Padding Y: 10px

Border radius: 6px

Font size: 14px

Font weight

Border: 0px

Preview

CSS Output

.button {
  background-color: #0d7a5f;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.button:hover {
  opacity: 0.88;
}

Loading tool…

How it works

Set colours, padding, and radius

Preview the live button

Copy the button CSS

Need a custom tool built into your product?

We build calculators, estimators, and AI-powered tools that convert visitors into leads.

Start a project