CSS button generator. Gradient · hover · shadow. Landing-page CTAs.
🔘 Preview (hover me)

How to use

  1. Type the button text.
  2. Pick style (solid / gradient / outline / ghost / neumorphism).
  3. Pick size (Small–XL).
  4. Set colors, radius, shadow, hover.
  5. Copy CSS.

Key features

  • 5 styles (solid / gradient / outline / ghost / neumorphism)
  • 4 sizes (Small–XL)
  • 5 hover effects (lift / scale / brightness / invert / none)
  • 5 shadow levels (none / sm / md / lg / glow)
  • Live preview + CSS copy

Use cases

  • Landing-page CTAs — "Get Started"
  • Sign-up forms — Submit buttons
  • E-commerce — "Add to Cart"
  • Marketing emails — inline-CSS compatible
  • Dashboards — action buttons

CTA button psychology

Buttons are the final gate before user action. (1) Color: red/orange = urgency, green = safety. (2) Size: too small = ignored, too large = pushy. Make important buttons 15–20% larger than body. (3) Hover: signals clickability. Lift is the most universal. (4) Shadow: depth invites clicks.

FAQ

Accessibility (a11y)?

Use `button` or `a`, keep focus outline/box-shadow visible, never rely on color alone for meaning.

Dark-mode support?

Use CSS variables: `--btn-bg: #ec4899` then `[data-theme="dark"] { --btn-bg: ... }`.

Mobile touch target?

Minimum 44×44 px (Apple HIG). XL size recommended.

Free?

Yes.