Skip to main content
7BBusyBoss

CSS Button Generator — Visual Button Builder

Generate button CSS with colours, padding, radius and shadow. Resting state only — add your own hover and focus rules for an accessible button.

No limitsZero data leaksSuper fast
12px
24px
10px
16px
600
.btn {
  background: #3b82f6;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
  box-shadow: 0 4px 14px #3b82f655;
}

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

.btn:active {
  background: #2d63bb;
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

You're on 7BusyBoss — 300+ free tools that run instantly in your browser. No signup, nothing uploaded.

CSS Flexbox GeneratorCSS Border Radius GeneratorGradient Text GeneratorCSS Text Shadow GeneratorNeumorphism GeneratorCSS Clip-Path Generator
Browse all Design Generators →
About this tool

Buttons are not single states

A button needs distinct styling for four moments: its resting state, hover (mouse over), focus (keyboard navigation), and active (pressed). Yet many button generators only handle the first. This one produces the core appearance — colours, padding, radius, shadow — and leaves the interaction states to you.

The generated code looks like this:

.btn {
  background: #3b82f6;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px #3b82f455;
}

That is the resting state. No :hover rule. No :focus-visible. A button styled only this way gives keyboard users no indication of where they are.

Keyboard users need a focus indicator

If your button has no :focus-visible rule, anyone navigating with Tab cannot see which button is selected. The Web Content Accessibility Guidelines require a visible focus indicator with sufficient contrast. This generator does not emit that rule, so add it yourself: button:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }.

The shadow colour follows the background

The box shadow is derived from your background colour at a fixed 55 alpha — you cannot tint it independently in the tool. If you want a different shadow tone, edit the box-shadow value in the copied CSS.

Colour contrast is not checked

The generator lets you pick any text and background colours but does not verify they meet the WCAG AA threshold of 4.5:1 for normal text. White text on a light background will look fine in the picker and fail for real users. Check the pair before you ship it. For accent typography alongside your buttons, see the Gradient Text Generator or the Glassmorphism Generator.

How to use the CSS Button Generator

Takes about a minute. No signup, no download, your data stays in your browser.

  1. 1
    Open the tool. Scroll up to the CSS Button Generator above — it loads instantly in your browser, no install needed.
  2. 2
    Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
  3. 3
    Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.

Frequently asked questions

Common questions about the CSS Button Generator.

Does this tool generate a :hover state for the button?

No. The generated CSS includes only the resting state — background, colour, padding, radius and shadow. You add :hover manually, typically by adjusting background brightness or shadow depth. Browsers provide no default hover effect for custom-styled buttons.

Why does my generated button show no focus ring when I press Tab?

The tool does not emit a :focus-visible rule, which is how browsers indicate keyboard focus. Without it, keyboard users cannot see which button is selected. Add your own, for example button:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }.

Can I adjust the shadow colour independently from the background?

No. The generator derives the shadow from the background colour at a fixed alpha value of 55. If you need a different shadow tone, copy the generated CSS and edit the box-shadow value by hand to any colour you prefer.

Does the tool check whether my text colour has enough contrast?

No. The colour pickers have no validation. White text on a light background will pass the picker but fail the WCAG AA requirement of 4.5:1 for normal text. Test your colour pair with a contrast checker before using it in production.

Community rating

Discussion (0)

No comments yet. Start the discussion.

Keep exploring

Related tools across 7BusyBoss — all free, all instant.