CSS Button Generator

How this generator works

The tool takes your padding value and drops it into a complete .button base rule — display: inline-block, text and background colors, zero border, a rounded corner and a pointer cursor — then prints it ready to copy. It builds the resting-state styles for you; the interaction states below are the part you add. Everything runs in your browser.

Worked example

Input 12px 20px produces:

.button {
  display: inline-block;
  padding: 12px 20px;
  color: #ffffff;
  background: #4f46e5;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

The states you still need

A production button needs four more rules. Add a transition to the base rule so the changes animate.

.button { transition: background .15s ease, transform .05s ease; }
.button:hover   { background: #4338ca; }
.button:active  { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; }
.button:disabled { opacity: .5; cursor: not-allowed; }

State reference

When you would use it

Scaffolding a button style for a prototype, generating a consistent starting point for a design system primitive, or getting the base rule quickly so you can focus on the state and variant work.

FAQ