Free CSS Button Generator - Glass, Neon, Gradient & Icon Buttons

Glass buttons use backdrop-filter: blur() to create a frosted-glass effect — the background content blurs through the button. They need a semi-transparent background color and work best on image or gradient backgrounds. Neon buttons use layered box-shadows in the same color as the border to create an electric glow effect — best on dark backgrounds. Neumorphic buttons use soft inset and outset shadows in near-white tones to create a raised plastic look — only works on light, uniform backgrounds. Each style has a specific context: glass for overlays, neon for dark UIs, neumorphic for minimal light-mode apps.

Select an icon name from the Icon picker and choose its position: Left (icon before text), Right (icon after text), or Only (icon-only button). The generator adds a gap between icon and text, sets display: inline-flex with align-items: center, and includes the correct <i class="ph-fill ph-{name}"> markup in the HTML output. For icon-only buttons, an aria-label attribute is added automatically so screen readers can announce the button purpose. Make sure the Phosphor icon CSS is loaded in your project — add <link href="https://unpkg.com/@phosphor-icons/web/src/fill/style.css" rel="stylesheet"> to your HTML head.

Primary actions: solid buttons with high-contrast brand color, strong shadow for prominence — use sparingly (one per section). Secondary actions: outline or ghost buttons with lower visual weight. Destructive actions: red solid buttons for delete/cancel, always require confirmation dialog. Success/completion: green solid for submit, save, create. Loading state: replace button text with a spinner and "Loading…" label, disable pointer events. Icon-only: circular or square buttons for toolbars — always include aria-label. Follow the visual hierarchy: solid > outline > ghost > text-only. Consistency is critical — the same action type should look the same everywhere in your app.

WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text (18px+ or 14px bold). Test button text against its background color. For focus rings, never remove outline without replacing it — use button:focus-visible { outline: 2px solid #color; outline-offset: 3px; } so rings only appear for keyboard navigation, not mouse clicks. Minimum 3:1 contrast for the focus indicator against adjacent background. The generator exposes focus ring color and width controls so you can set these to match your brand while meeting accessibility guidelines. Disabled buttons should use cursor: not-allowed and reduced opacity (0.4–0.6), never removed entirely.

Subtle and fast effects feel responsive; dramatic and slow effects feel laggy. Best combinations: lift (translateY(-2px) + box-shadow increase) at 200ms ease-out for primary CTAs; scale(1.04) at 150ms for compact buttons; background color darkened 10–15% at 150ms for minimal styles. Glow effect (box-shadow with color) works well on neon or gradient buttons. Avoid: huge movements, transitions over 300ms, pure color inversions, jarring direction changes. Always use transition on multiple properties: transition: transform 0.2s, box-shadow 0.2s, background-color 0.15s. On mobile (touch), hover states do not persist so design buttons to be clear without relying on hover.

Use CSS output if your project uses plain CSS, SCSS, CSS Modules, or styled-components — paste the .btn class into your stylesheet and the HTML markup into your template. Use Tailwind output if your project uses Tailwind CSS — copy the class string directly into your button element. The CSS output includes all five states as separate selectors (:hover, :active, :focus-visible, :disabled). The Tailwind output uses variant prefixes (hover:, active:, disabled:, focus-visible:) inline. If you use Tailwind with an icon, you still need Phosphor icon CSS loaded separately. Both outputs stay in sync with your current configuration in the generator.