CSS Button Generator

NEW

Design a button visually with a live preview and copy the CSS.

Button Text

Background

Text Color

Border Color

Padding X: 24px

Padding Y: 12px

Radius: 8px

Font: 16px

BorderShadow

.button {
  background: #4f46e5;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 14px #4f46e566;
  cursor: pointer;
  transition: all 0.2s;
}

How to use CSS Button Generator

Set the button text, background, text color and border color.
Adjust padding, font size, border radius, and toggle the border and shadow.
Copy the generated CSS and apply the .button class in your project.

→ use a gradient as the background instead

Frequently asked questions

What button styles can I customize?

Background, text, and border colors, horizontal and vertical padding, corner radius, and font size — plus optional border and drop-shadow toggles, all with a live preview.