CSS

CSS Button Generator

Solid, gradient, outline, glass, neumorphic or 3D-press -- a real rendered, hoverable button, not a mockup. Size, radius, shadow, hover effects, icons, presets, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Builds an actual rendered <button> element with a genuine :hover and :active state, not a static screenshot-style mockup — hovering the preview here shows exactly what a user will see, including the 3D-press style's actual push-down animation on click.

Six button styles

Solid, gradient (with adjustable angle), outline (with adjustable border width), glass (translucent with backdrop blur), neumorphic (soft-UI derived from one colour), and 3D-press — a button with a solid drop shadow "lip" beneath it that flattens when clicked, simulating a real physical press.

Real, testable hover effects

Five hover effects — none, lighten, scale up, lift with a bigger shadow, or a coloured glow — are applied as an actual CSS :hover rule on the preview button, so the effect can be tried by hovering it directly rather than only imagined from a description.

Sizing, shape and icons

Three sizes, an adjustable border radius (including 999px for a full pill), an optional drop shadow, full-width, and an icon option — an arrow before or after the label, or a checkmark — round out a button that's ready to actually ship rather than needing extra polish.

Presets and randomizing

Seven presets — Primary CTA, Ghost, Danger, Success, Glass Pill, Neumorphic, and 3D Press — cover common button roles, plus a randomize button for quick exploration.

Getting the CSS out

Export as plain CSS (with separate :hover/ :active rules), a Tailwind class string (including hover: variants), SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The button is built and rendered entirely in the browser -- nothing is sent to a server.

Can I actually try the hover effect, not just read about it?

Yes -- the preview is a real button with a genuine CSS :hover rule applied, so hovering it directly shows the actual effect, including the 3D-press style's real push-down animation on click.

What does the 3D-press style do?

It adds a solid drop-shadow "lip" beneath the button that flattens and shifts the button down when clicked (:active), simulating a real physical button press rather than a flat colour change.

What is the glass button style?

A translucent background with backdrop-filter blur and a semi-transparent border -- the frosted-glass look, applied specifically to a button.

Can I add an icon to the button?

Yes -- an arrow can be placed before or after the label, or a checkmark icon, without needing to hand-write the icon markup.

What export formats are available?

Plain CSS with separate :hover/:active rules, a Tailwind class string including hover: variants, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.