Button Generator

Preview

Float Preview

Background:

CSS Code

.custom-button {
  padding: 8px 16px;
  font-weight: 500;
  border-radius: 8px;
  background-color: #9f7aea;
  color: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #805ad5;
}

Customize

Text

Button Text

Font Size

Font Weight

Letter Spacing

Text Transform

Text Decoration

Size

Padding X

Padding Y

Border Radius

Colors

Background Color

Text Color

Hover Color

Border

Border Width

Border Color

Effects

Box Shadow

Offset X

Offset Y

Blur

Spread

Shadow Color

Opacity

Text Shadow

Offset X

Offset Y

Blur

Shadow Color

Opacity

Opacity

Transition Speed (seconds)

About Button Generator

A comprehensive CSS button generator that helps you create beautiful, customizable buttons for your web projects. This tool provides real-time preview and generates clean, production-ready CSS code with support for various styling options including shadows, transitions, and hover effects.

How to Use Button Generator

Customize button text and typography settings (size, weight, spacing, transform)
Adjust button dimensions with padding and border radius controls
Choose colors for background, text, hover state, and borders
Add and customize box shadows with color, spread, and opacity
Apply text shadows with custom offset and blur effects
Fine-tune opacity and transition timing
Preview your button on different background colors
Copy the generated CSS code with one click
Test hover effects in the live preview