CSS Button Generator
Live preview · Real-time CSS
Button Presets
Customize
Label
Icon
Background
Color 1
Color 2
Direction
Text
Font
Color
Font size15px
Weight
Transform
Letter spacing0.3px
Size & Shape
Padding X28px
Padding Y12px
Border radius8px
Border
Width0px
Color
Style
Shadow
Normal
Hover
Hover State
Hover 1
Hover 2
Scale1.04
Transition0.25s
Active State
Scale0.97
Shadow
Backdrop Filter (glass)
Value
Preview
Hover · Click to preview all states
Export Code
.my-button {
  display: inline-block;
  padding: 12px 28px;
  background: linear-gradient(135deg, #4776e6, #8e54e9);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border: 0px solid #4776e6;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 15px rgba(71,118,230,0.4);
  transition: all 0.25s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.my-button:hover {
  background: linear-gradient(135deg, #5a89f5, #9f6bf5);
  box-shadow: 0 6px 20px rgba(71,118,230,0.6);
  transform: scale(1.04);
}

.my-button:active {
  transform: scale(0.97);
}

Related Tools

See all ->
UI Snippets LibraryCopy-paste HTML, CSS & JS componentsToggle Switch GeneratorAccessible switch UI + code exportGlassmorphism GeneratorFrosted glass effect builderBox Shadow GeneratorCSS shadow studioGradient GeneratorCSS gradient builderCSS Animation GeneratorKeyframe animation builderColor PickerHEX · RGB · HSL · OKLCHCSS → TailwindConvert CSS to utilities

CSS Button Generator — Create Stunning Buttons with Live Preview

Updated May 17, 2026
Share & Support

What's included

Features

26 built-in presets across 10 style categories: Gradient (Electric Blue, Sunset, Aurora, Ocean, Purple Rain, Fire), Neon (Cyan, Pink, Green), Glassmorphism (Glass, Frosted), Neumorphism (Soft Push), Outlined (Outlined, Pill), 3D (Depth, Retro Pop), Metallic (Silver, Gold), Brutalist (Neobrutalist, Dark), Pastel (Cotton Candy, Mint), Skeuomorphic (Classic, Embossed), Minimal (Minimal, Ghost, Underline), Solid (Amber, Danger); pick gradient colors with our Color Palette Generator
Live dual-background preview — see your button on dark and light backgrounds at the same time
Full background control: solid color or 2-stop gradient with direction selector; build the gradient with our Gradient Generator
Typography controls: font size, font weight, letter spacing, text transform (uppercase/capitalize/lowercase)
Size and shape: padding X/Y sliders, border-radius from square (0px) to pill (50px)
Border customization: width, color, and style (solid, dashed, dotted, double)
Box shadow editor: set normal and hover shadows with full CSS value support; design complex shadows with our Box Shadow Generator
Hover state controls: hover background color, scale transform, and transition duration
Backdrop filter support for glassmorphism blur effects; design full glassmorphism cards with our Glassmorphism Generator
Icon support: add any emoji or symbol before or after button text using the full emoji picker or custom text input; gap slider controls spacing; icons included in all exports
Export to 5 formats: CSS, SCSS (with nesting), HTML (full document), React JSX (with useState hover + active), Tailwind utility classes
Active state controls: configure press-down scale and shadow for the :active state, or disable it entirely
Resizable preview area: drag the handle to give more or less space to the preview stage
Google Fonts picker: choose from 40+ web fonts with live preview rendered in the chosen font
One-click copy to clipboard for any export format
Category filter: quickly browse presets by style category
No sign-up, no watermark, runs 100% in the browser

About this tool

Design a CSS Button Visually — Export CSS, Tailwind, or React JSX Instantly

Runs in your browser
No install or signup
Free forever

You need a gradient CTA button for a landing page, a neon glow button for a dark dashboard, or a frosted glass button for a glassmorphism UI — but writing the box-shadow, backdrop-filter, and hover state CSS from scratch is tedious. Pick one of 26 presets, adjust the values with sliders, and copy the code in whatever format your project needs.

Every property is live-editable: background (solid or multi-stop gradient), text color, font size and weight, padding, border radius, border style, box shadow, hover background, scale transform on hover, active press-down effect, transition speed, and backdrop-filter blur for glass effects. The preview updates instantly and you can drag it to any height. Switch the preview background between dark, light, or a custom color to check contrast.

Five export formats: plain CSS (with :hover and :active states), SCSS (with & nesting), a standalone HTML document, a complete React JSX component with useState hover logic, and Tailwind utility classes. The icon picker adds any emoji before or after the label — included automatically in every export. No account, no watermark, 100% in-browser.

Step by step

How to Use

  1. 1
    Choose a presetThe left panel shows 26 button presets grouped by 10 style categories: Gradient, Neon, Glassmorphism, Neumorphism, Outlined, 3D, Metallic, Brutalist, Pastel, Skeuomorphic, Minimal, and Solid. Use the category tabs to filter by style. Click any preset to load it into the customizer instantly.
  2. 2
    Set the label and backgroundEnter your button text in the Label field. Switch the background between solid color and gradient. For gradient, pick two colors and a direction (135deg, 90deg, etc.). For glassmorphism effects, use a semi-transparent value like rgba(255,255,255,0.15) with a backdrop-filter blur.
  3. 3
    Adjust typography, size, and shapeControl font size, font weight, text transform (uppercase, capitalize), and letter spacing. Drag the Padding X, Padding Y, and Border Radius sliders to shape the button. Set border-radius to 50px for a full pill shape.
  4. 4
    Configure hover, active, and iconSet hover background color, scale transform, and transition speed. Configure the press-down scale for the :active state. In the Icon section, set position to Before or After, open the emoji picker or type any character, and use the gap slider for spacing. Icons are included in all exports.
  5. 5
    Preview on dark and light backgroundsThe live preview panel shows your button updating in real time. Toggle the background between dark, light, or a custom color to check contrast. Hover and click the button to see all three states animate. Drag the resize handle to give the preview more or less space.
  6. 6
    Copy or export the codeClick any of the five export tabs: CSS (with :hover and :active states), SCSS (with & nesting), HTML (full standalone document), React JSX (complete component with useState hover logic), or Tailwind (utility classes). Click Copy to put the code on your clipboard and paste directly into your project.

Real-world uses

Common Use Cases

◉
Create a gradient or animated CTA button for a landing page
Pick from the Gradient presets — Electric Blue, Sunset, Aurora — adjust the padding and border radius, and export CSS or Tailwind. No writing box-shadow and hover states by hand.
▦
Define a button style for a design system or component library
Build the exact look, export the CSS, and use the values to create a consistent button token. All export formats include hover and active states so the component is production-ready.
◑
Build a neon or gradient button for a dark-mode dashboard
The Neon and Gradient presets are designed for dark backgrounds. Preview on the dark background setting to confirm contrast, then export CSS or React JSX. Build the dashboard layout with our CSS Grid Builder.
△
Create a frosted glass button for a glassmorphism UI
The Glass and Frosted presets use semi-transparent backgrounds with backdrop-filter blur. Works best over an image or gradient background — test in the preview before exporting.
⚡
Get Tailwind classes for a styled button without writing arbitrary values
The Tailwind export tab generates a button with the correct utility classes including arbitrary values for colors and radii. Paste into any Next.js or Vite Tailwind project.
≡
Export a complete React button component with hover state
The React JSX export generates a functional component with useState tracking hover state — the background and shadow change on mouse enter/leave. Paste directly into a React project.
✦
Generate an outlined or ghost button for secondary actions
The Outlined and Ghost presets use transparent backgrounds with border or text-only styling. Good for cancel buttons, form secondary actions, and less prominent CTAs.
◉
Design a 3D or retro button for a game UI or creative site
The 3D Depth and Retro Pop presets use layered box-shadow to simulate depth with a translateY press effect. Stand-out style for portfolios, game interfaces, and creative microsites.

Got questions?

Frequently Asked Questions

Pick a preset, adjust the hover background color and hover scale in the Hover State section, and export the CSS tab. The generated CSS includes the base style, :hover state (with background color change and scale transform), and :active state (press-down effect) in a single clean block — ready to paste.

Select any of the Gradient presets (Electric Blue, Sunset, Aurora, Ocean, Purple Rain, Fire) or set Background to Gradient in the Background section, pick two colors and a direction. The exported CSS uses a linear-gradient() for the background property with proper hover state handling.

Select the Glass or Frosted preset. These use a semi-transparent background (rgba(255,255,255,0.15)), a thin rgba border, and backdrop-filter: blur(12px). The glass effect is only visible when the button sits over a colorful or image background — use the preview background toggle to test.

Select Neon Cyan, Neon Pink, or Neon Green from the Neon presets. These use a transparent background, a colored border, and a multi-layer box-shadow that creates the glow. The hover state widens the shadow for a brighter glow-on-hover effect.

Click the React JSX tab in the export panel. The generated code is a complete React function component using useState to track hover — different background and box-shadow values are applied on onMouseEnter and onMouseLeave. Paste it directly into a React project.

Yes. The Tailwind export generates a button with Tailwind utility classes. Paste into any project with Tailwind installed. Some values use arbitrary-value syntax like rounded-[8px] or shadow-[...] which requires Tailwind v3+.

Yes. In the Icon section, set position to Before or After, then open the emoji picker to browse hundreds of emojis by category, or type any character directly. Use the Gap slider to control icon-to-text spacing. The icon is included in all five export formats automatically.

backdrop-filter is supported in all modern browsers (Chrome, Edge, Safari, Firefox 103+). The CSS export includes both the standard property and the -webkit- prefix for maximum compatibility.

Yes — completely free, no account required, no watermarks. All processing runs in your browser. No code or data is sent to any server.