Generate a CSS Gradient Button with Hover
Build a gradient button visually, then tune the hover state so the colors shift on rollover. Adjust padding, radius, and shadow live and copy CSS that includes both the base and :hover rules.
CSS Button Generator
Generate styled CSS buttons with hover effects
State Preview
Live Interactive
Hover and click to test transitions
<button type="button" class="button">Click me</button>.button {
background-color: #6366f1;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border: none;
border-radius: 8px;
box-shadow: 0px 4px 12px 0px #6366f140;
transition: all 0.2s ease;
cursor: pointer;
outline: none;
line-height: 1.5;
}
.button:hover {
background-color: #4f46e5;
color: #ffffff;
transform: scale(1.02);
box-shadow: 0px 6px 20px 0px #6366f161;
}
.button:active {
background-color: #4338ca;
color: #ffffff;
transform: scale(0.98) translateY(1px);
box-shadow: 0px 2px 4px 0px #6366f161;
}Quick Start
- 1Pick the gradient preset or set two background colors
- 2Adjust padding, border radius, and box shadow
- 3Switch to the hover state and change the gradient or shadow
- 4Copy the generated CSS with the base and hover rules
More Generate Tools
All generators →Generate a CSS 3D Push Button
Create a CSS 3D push button that looks pressed on click. Free online 3D button generator with hover and active states, no signup.
Generate Frosted Glass Card CSS
Create a frosted glass card with the glassmorphism effect and copy the CSS. Free online frosted glass generator with Safari prefix, no signup.
Generate a Glassmorphism Navbar CSS
Create a translucent glassmorphism navbar and copy the CSS. Free online glass navbar generator with blur and fallback, no signup.
Generate a Neumorphic Soft UI Button CSS
Create a soft UI neumorphic button with dual box shadows and copy the CSS. Free online neumorphism button generator, no signup.
Generate JSON Schema from an API Response
Paste a JSON API response and generate a valid JSON Schema for validation. Free online JSON Schema generator, runs in your browser.
Generate an HTML Email Signature for Gmail
Create a professional HTML email signature with social icons and a logo for Gmail. Free online email signature generator, no signup.
Looking for FAQs and advanced options? Visit the full CSS Button Generator page →