</>
cssgenerators.dev
Star on GitHub
Tools / Button

CSS Button Generator

Start from a preset, tune colors, radius, padding and hover state, then copy the full button CSS including :hover.

#6366f1
#ffffff
Border radius8px
Padding Y12px
Padding X24px
Hover bg
CSS
.button {
  background: linear-gradient(180deg, #6366f1, #6366f1dd);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 24px;
  border: none;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.button:hover {
  background: linear-gradient(180deg, #4f46e5, #4f46e5dd);
  transform: translateY(-1px);
}

CSS generated is free to use — no attribution required.

How do you generate button CSS?

Pick a preset style (Modern, Flat, Outline, Glassmorphism, Gradient, or Retro) then fine-tune any property. Hover over the live preview to see the hover state. The CSS output includes both .button and .button:hover rules.

What are the CSS button properties?

Key properties for styling buttons: background (solid or gradient), color (text), border-radius (corner rounding), padding (inner spacing), border (outline), box-shadow (depth), and transition (smooth hover animation).

How does a glassmorphism button work in CSS?

The glass preset uses backdrop-filter: blur() with a semi-transparent background and subtle border to create a frosted-glass effect. Works best over coloured or blurred backgrounds.

What accessibility requirements apply to CSS buttons?

Ensure your button has sufficient color contrast (WCAG AA requires 4.5:1 for normal text). Use cursor: pointer so the cursor changes on hover. The generated CSS already includes this.

Other CSS Tools
Box ShadowBorderFlexboxGradient