Should buttons have a focus style?

Yes. The generated CSS includes a :focus-visible outline so keyboard users can see which button is selected.

How do I add a hover animation?

Pick a hover effect in the controls. The code adds a transition and a :hover rule you can copy as-is.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Button Generator

Craft call-to-action buttons without trial and error. Control colors, padding, typography, border, radius and hover behaviour, and test the hover state live.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Label

Background

Gradient

Gradient end

Text color

Font size16px

Font weight

Padding Y12px

Padding X24px

Radius8px

Border width0px

Border color

Shadow

Hover effect

Live preview

Generated CSS

.button {
  background: linear-gradient(135deg, #00ff66, #00cc44);
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 255, 102, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

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

// Example output

.button {
  background: linear-gradient(135deg, #00ff66, #00cc44);
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 255, 102, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

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

// Features

▸Solid or gradient backgrounds
▸Padding, font size and weight
▸Border and radius controls
▸Lift, glow and darken hover effects
▸Includes :hover and :focus-visible styles

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Button Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Badge Generator

Generate compact status badges and pill labels with custom colors, radius, casing and an optional status dot.

Box Shadow Generator

Tune offset, blur, spread, opacity and inset shadows visually and export a clean CSS box-shadow declaration.

CSS Toggle Switch Generator

Design accessible CSS toggle switches built on a real checkbox, with custom size, colors and speed.