.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
UI Snippets LibraryCopy-paste HTML, CSS & JS components
Toggle Switch GeneratorAccessible switch UI + code export
Glassmorphism GeneratorFrosted glass effect builder
Box Shadow GeneratorCSS shadow studio
Gradient GeneratorCSS gradient builder
CSS Animation GeneratorKeyframe animation builder
Color PickerHEX · RGB · HSL · OKLCH
CSS → TailwindConvert CSS to utilitiesCSS Button Generator — Create Stunning Buttons with Live Preview
What's included
Features
About this tool
Design a CSS Button Visually — Export CSS, Tailwind, or React JSX Instantly
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 across 10 style categories, adjust the values with sliders, and copy the code in whatever format your project needs.
Each preset is really just a JavaScript object of style values — background colors, gradient direction, padding, border, shadow, and hover/active variants — that gets fed into the same style engine every other control writes to, so switching presets and then tweaking a slider never fights the underlying state. The neon presets get their glow from a multi-layer box-shadow combining a tight inner glow with a wider outer blur; the neumorphic preset pairs a light shadow on one corner with a dark shadow on the opposite corner against a matching background to fake an embossed, pressed-in look; the 3D and retro presets use a solid offset shadow that shrinks and the button that translates down on hover, simulating a physical button being pushed.
Every property is live-editable: background (solid or 2-stop gradient with direction), text color, font size, weight, letter-spacing and text-transform, padding, border radius and style, box shadow (normal and hover), hover background and scale transform, a separate active/press-down scale and shadow, transition duration, and backdrop-filter blur for glass effects. A Google Fonts picker loads any of 40+ web fonts on demand by injecting a stylesheet link, and an emoji icon can sit before or after the label with its own gap control. The dual-background preview shows the button on both dark and light surfaces at once so you can judge contrast without switching modes.
Five export formats read from that same style object: plain CSS with :hover and :active blocks, SCSS with & nesting, a standalone HTML document, a React JSX component using useState to track hover and active state inline, and Tailwind utility classes with arbitrary-value syntax for non-standard radii and shadows. No account, no watermark, 100% in-browser.
Step by step
How to Use
- 1Choose 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.
- 2Set 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. - 3Adjust 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.
- 4Configure hover, active, and iconSet hover background color, scale transform, and transition speed. Configure the press-down scale for the
:activestate. 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. - 5Preview 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.
- 6Copy or export the codeClick any of the five export tabs: CSS (with
:hoverand:activestates), SCSS (with&nesting), HTML (full standalone document), React JSX (complete component withuseStatehover 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
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.