Why include :focus-visible instead of :focus?

Keyboard users need a visible focus indicator (otherwise they can't tell where they are on the page). But mouse users get annoyed by the focus ring showing every time they click. :focus-visible (a 2020+ CSS pseudo-class) only shows the ring on keyboard navigation, not on mouse click — best UX for both groups. Browser support is universal as of 2026.

What's the prefers-reduced-motion thing?

An OS / accessibility setting where users with vestibular disorders, attention sensitivities, or screen-reader users disable motion-heavy animations. Best practice is to wrap any animation > brief in a `@media (prefers-reduced-motion: reduce)` block that turns it off (or shortens it). The generator includes this for hover animations.

Why button vs anchor (a tag)?

Use for actions ('Submit', 'Buy now', 'Open menu') — the browser handles keyboard activation (Enter / Space), screen readers announce 'button', and form submission works. Use for navigation ('Read more', 'View product') — semantically the user is going somewhere, the URL is shareable, and right-click → open in new tab works. The generated CSS works on both, but pick the right HTML element.

Can I have multiple button styles (primary / secondary / outline)?

Generate primary first; for secondary/outline, change colors and border style and generate again. The tool generates one button at a time — for a coordinated multi-variant set, build the primary in this tool, then manually create variants by overriding specific properties.

How do I make the button match my brand color?

Paste your brand hex into the background-color picker. Pick a contrasting text color (white on dark backgrounds, black on light). For the focus ring, pick a color that contrasts with both the background and the button — usually a brighter version of your brand color works.

Will this work on iOS Safari?

Yes — all CSS used (gradient backgrounds, transitions, transforms, focus-visible, prefers-reduced-motion) is supported in Safari 15+ which covers all current iOS users. iOS 14 and below has partial support (no focus-visible) but those make up <2% of iOS traffic.

Developer Utilities · Free tool

CSS Button Generator

Generate a fully styled CSS button with baked-in hover, active, and focus states. Tune colors and sizing in your browser instantly, no signup.

Updated June 2026

LabelBackgroundText colorBorder radius (8px)Padding X (20px)Padding Y (10px)Font size (14px)WeightDrop shadowHover effect

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f766e;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover {
  filter: brightness(0.9);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

Found this useful?Email Buy Me a Coffee

What it does

Visual CSS button generator with all the modern best- practice states baked in: :hover (mouse-over feedback), :active (click depression effect), :focus-visible (keyboard-only focus ring for accessibility), and :disabled (visual differentiation when the button can't be clicked). Tune colors, padding, border radius, font weight, shadow, and hover animation (lift, brighten, scale) — see live preview as you adjust, then copy production-ready CSS.

Most CSS button generators online ship code that's been obsolete for 5+ years — :focus rings showing on every click (annoying for mouse users; what triggered the move to :focus-visible), cursor: pointer on already-clickable elements (redundant), missing dark-mode considerations, and no consideration for reduced-motion users. The output here uses only modern, broadly-supported CSS conventions and includes a @media (prefers-reduced-motion: reduce) query that disables animation for users who've requested it (an accessibility default).

Output is a single self-contained CSS class (.btn, renameable) you can drop into any stylesheet — works on <button>, <a>, or any element with display: inline-block. The styles are pure CSS — no JavaScript, no Tailwind, no framework. Use as a starting point for your own design system or as a one-off button when you don't want to wire up a component library.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/css-button-generator" width="100%" height="720" frameborder="0" loading="lazy" title="CSS Button Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Customize colors: background, text, border, focus-ring color. Defaults work; brand-color the primary action.
Set sizing: padding (vertical and horizontal), font size, font weight (400 normal, 600 semibold, 700 bold).
Pick border radius (0 sharp, 4-8 rounded, 999 pill-shaped).
Adjust shadow (none / subtle / pronounced) and hover animation (lift / brighten / scale / none).
Copy the generated CSS. Apply the .btn class to any <button>, <a>, or <div> in your markup.
Optionally rename .btn to .your-class-name in the output before copying — the tool generates it as a placeholder.

When to use this tool

Adding a polished button to a static site or landing page without a component library.
Generating a starter button for a design system you're building incrementally.
Quick prototyping when you don't want to figure out hover states from scratch.
Onboarding designers / non-CSS-fluent devs to button best practices visually.

When not to use it

When you're already using a component library (React, Vue, Tailwind, Bootstrap) — use those library's button primitives.
Multi-button design systems with consistent variants (primary/secondary/ghost) — design those holistically rather than one button at a time.
Buttons that need complex state (loading spinner, success checkmark) — those need JS, not just CSS.
When you need printer-style or email-client compatibility — those have different limitations and the generated CSS won't survive both contexts.

Common use cases

Quick generation during a typical workday
Pre-decision sanity-check on inputs and outputs
Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion

Frequently asked questions

Why include :focus-visible instead of :focus?: Keyboard users need a visible focus indicator (otherwise they can't tell where they are on the page). But mouse users get annoyed by the focus ring showing every time they click. :focus-visible (a 2020+ CSS pseudo-class) only shows the ring on keyboard navigation, not on mouse click — best UX for both groups. Browser support is universal as of 2026.
What's the prefers-reduced-motion thing?: An OS / accessibility setting where users with vestibular disorders, attention sensitivities, or screen-reader users disable motion-heavy animations. Best practice is to wrap any animation > brief in a `@media (prefers-reduced-motion: reduce)` block that turns it off (or shortens it). The generator includes this for hover animations.
Why button vs anchor (a tag)?: Use <button> for actions ('Submit', 'Buy now', 'Open menu') — the browser handles keyboard activation (Enter / Space), screen readers announce 'button', and form submission works. Use <a href=...> for navigation ('Read more', 'View product') — semantically the user is going somewhere, the URL is shareable, and right-click → open in new tab works. The generated CSS works on both, but pick the right HTML element.
Can I have multiple button styles (primary / secondary / outline)?: Generate primary first; for secondary/outline, change colors and border style and generate again. The tool generates one button at a time — for a coordinated multi-variant set, build the primary in this tool, then manually create variants by overriding specific properties.
How do I make the button match my brand color?: Paste your brand hex into the background-color picker. Pick a contrasting text color (white on dark backgrounds, black on light). For the focus ring, pick a color that contrasts with both the background and the button — usually a brighter version of your brand color works.
Will this work on iOS Safari?: Yes — all CSS used (gradient backgrounds, transitions, transforms, focus-visible, prefers-reduced-motion) is supported in Safari 15+ which covers all current iOS users. iOS 14 and below has partial support (no focus-visible) but those make up <2% of iOS traffic.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →