Color & Design

CSS Button Generator

Design a button visually — colours, padding, radius, border and shadow — and export tidy CSS including a hover state.

Color & design

Button designer

Local only

Button labelBackgroundText color Drop shadow

Vertical padding12pxHorizontal padding24pxFont size16pxCorner radius10pxBorder width0px

Text contrast on the button: 5.17:1 — passes WCAG AA for normal text.

.button {
  background: #2563eb;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.45);
  transition: background 150ms ease, transform 150ms ease;
}

.button:hover {
  background: #1f54c8;
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

Generated in your browser

The preview is a real button element, so the exported CSS behaves identically in your project.

What makes a good button

At least 44px tall so it is comfortable to tap on a phone.
A label that names the action — "Create account" beats "Submit".
A visible focus ring for keyboard users, which the exported CSS includes.
Text contrast of 4.5:1 or better against the button background.

The hover colour

The exported hover state darkens your background by 15%, a reliable default that keeps the hue and works on light and dark buttons alike.

Good to know

Frequently asked questions

Does the CSS include a hover state?

Yes, plus a focus-visible outline so keyboard users can see where they are.

Can I use this with Tailwind?

You can paste it into a component layer, though in Tailwind you would usually translate the values into utility classes.

Why does the contrast reading matter?

A button nobody can read is a button nobody clicks. The live reading keeps you above the WCAG AA threshold.

Is the shadow optional?

Yes — untick the drop shadow and it is removed from both the preview and the exported CSS.

Button designer

What makes a good button

The hover colour

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter

RGB to HEX Converter

HEX to HSL Converter

Color Palette Generator