.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);
}You Might Also Like
CSS Button Generator — Create Stunning Buttons with Live Preview
About this tool
The CSS Button Generator is a free, real-time tool for creating beautiful, production-ready buttons without writing a single line of CSS from scratch. Choose from 26 hand-crafted presets spanning gradient, glassmorphism, neumorphism, neon glow, 3D, metallic, brutalist, pastel, skeuomorphic, outlined, and minimal styles — then fine-tune every property with live visual feedback. When you're happy, export clean code in the format your project needs: plain CSS, SCSS, full HTML, React JSX with hooks, or Tailwind utility classes.
Every button is fully customizable. Control background type (solid or multi-stop gradient), text color, font size and weight, padding, border radius, border style, box shadow, hover state, active state, scale transform, transition speed, and even backdrop-filter blur for glass effects. Each change reflects instantly in the resizable preview panel — drag it to any height — and you can switch the preview background between black, white, or any custom color to ensure your button looks great in any context.
One of the most useful features is the built-in icon picker. Add any emoji or symbol before or after your button label with a single click. Browse hundreds of emojis via the full emoji picker, or type any character directly. Adjust the gap between icon and text with a slider, and the icon is included in every export format automatically — no manual markup needed.
This tool is designed for speed. Pick a preset, tweak two or three values, copy the code, and you're done. No account, no watermark, no file size limit. Whether you're building a landing page, a dashboard, a component library, or a design system, the CSS Button Generator has you covered.
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)
- 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
- 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
- Hover state controls: hover background color, scale transform, and transition duration
- Backdrop filter support for glassmorphism blur effects
- 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
How to Use
Step 1 — Choose a preset. The 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.
Step 2 — Customize the button. The middle panel gives you full control over every CSS property. Start with the Label field to set your button text.
Background — Switch between solid color and gradient. For gradient, pick two colors and a direction (135deg, 90deg, etc.). For glassmorphism, use a semi-transparent value like rgba(255,255,255,0.15).
Text — Control color, font size, font weight, text transform (uppercase, capitalize), and letter spacing.
Size & Shape — Drag Padding X, Padding Y, and Border Radius sliders. Set border-radius to 50px for a full pill shape.
Border — Set width, color, and style (solid, dashed, dotted, double). Set width to 0 to hide the border entirely.
Shadow — Edit the CSS box-shadow value for both normal and hover states. Supports multi-layer and inset shadows — paste any valid CSS value directly.
Hover State — Set hover background color, scale transform, and transition speed.
Active State — Configure the press-down scale and optional shadow for the :active state. Toggle it off entirely if you don't want a click effect.
Icon — Set position to Before or After, then click 😀 to open the full emoji picker, or type any character directly. Adjust the gap between icon and label with the slider. The icon is automatically included in every export.
Backdrop Filter — Add blur(12px) for a frosted glass effect. Works best with semi-transparent backgrounds.
Step 3 — Preview your button. The right panel shows a live preview of your button on a selectable background (black, white, or custom color). Hover and click the button to see all three states — normal, hover, and active — animate in real time. Drag the resize handle to make the preview area taller or shorter.
Step 4 — Export your code. Click any of the five export tabs at the bottom right:
- CSS — Clean .my-button CSS with hover and active states
- SCSS — Same styles using SCSS nesting (&:hover, &:active)
- HTML — Full standalone HTML document you can open in a browser
- React JSX — A complete React component with useState hover logic and inline styles
- Tailwind — A <button> with Tailwind utility classes
Click Copy to put the code on your clipboard, then paste directly into your project.
Common Use Cases
Frequently Asked Questions
Yes — completely free with no sign-up, no account, and no watermarks. Everything runs in your browser.
The tool includes 26 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), and Solid (Amber, Danger).
Yes. In the Icon section, set the position to Before or After, then click the emoji picker button to browse hundreds of emojis by category, or type any character or emoji directly into the input. Use the Gap slider to control spacing between the icon and the text. The icon is included automatically in all export formats — CSS, SCSS, HTML, React JSX, and Tailwind.
Five formats: pure CSS (with :hover and :active states), SCSS (with & nesting), standalone HTML document, React JSX component with useState hover logic, and Tailwind utility class string.
Select the "Glass" or "Frosted" preset. These use a semi-transparent gradient background like rgba(255,255,255,0.15), a thin rgba border, and a backdrop-filter: blur(12px). Make sure your button sits over a colorful or image background for the glass effect to show.
Select "Neon Cyan" or "Neon Pink" from the presets. These use a transparent background, a colored border, and a box-shadow with multiple layers including the glow spread. The hover shadow is wider and brighter to create the glow-on-hover effect.
Click the "React JSX" tab in the export panel. The generated code is a complete React function component that uses useState to track hover, applying different background and box-shadow values on mouse enter/leave.
Yes. The Tailwind export generates a <button> element with Tailwind utility classes. Paste it into any React, Next.js, or HTML file that has Tailwind CSS installed. Note: some values use arbitrary-value syntax like rounded-[8px] which requires Tailwind v3+.
Select the "3D Depth" or "Retro Pop" preset. The 3D effect is created using a layered box-shadow that simulates depth, combined with a translateY on hover to make the button appear to press down when clicked.
The border-radius slider controls all four corners uniformly. For individual corners, manually edit the CSS output after copying — change border-radius to individual values like border-radius: 8px 8px 0 0.
backdrop-filter is supported in all modern browsers (Chrome, Edge, Safari, Firefox 103+). The tool outputs both the standard property and the -webkit- prefix for maximum compatibility.
Select "Outlined" or "Ghost" from the presets, or set bgType to solid with color "transparent", then set a border width of 1-2px and a visible border color.
While the tool generates CSS code, the exported values (colors, padding, border-radius, shadows) can be manually matched in Figma or other design tools for accurate design-to-code handoff.