FreeDev Tools

CSS Button Generator

Design buttons visually — colors, radius, padding, shadow, hover state — copy the CSS.

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 150ms ease;
}

.btn:hover {
  background: #3472d8;
}

.btn:active {
  transform: translateY(1px);
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Pick colors and shape

    Background, text, radius, padding, and shadow.

  2. 2

    Test hover and click

    The preview button has live hover/active states.

  3. 3

    Copy the CSS

    Base, :hover, and :active rules included.

Frequently Asked Questions

Background and text colors, corner radius, horizontal/vertical padding, font size, shadow depth, and an outline (ghost) variant — plus generated :hover and :active states.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually