CSS Button Generator
Design CSS buttons visually with hover effects. Customize colors, gradients, padding, border-radius, shadows, and transitions. 8 presets. Copy CSS instantly.
Hover over the button to see the hover effect
.button {
background-color: #3b82f6;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
border: none;
box-shadow: 0px 2px 4px 0px #00000020;
cursor: pointer;
transition: all 0.2s ease;
}
.button:hover {
background-color: #2563eb;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
border: none;
box-shadow: 0px 4px 12px 0px #00000020;
}stylePresets
collectionsButton Gallery
40 professionally crafted button styles. Click any to apply it to the generator above.
ads_clickPrimary Actions
crop_squareOutline & Minimal
shopping_cartE-Commerce
dashboardDashboard & SaaS
paletteCreative & Fun
About this tool
The CSS Button Generator lets you design custom buttons with full control over colors, gradients, padding, border-radius, shadows, and hover effects. Switch between Normal and Hover tabs to customize each state independently.
Use the 8 preset styles for quick results, then fine-tune each property. The live preview shows real hover effects when you mouse over the button. Copy the complete CSS including both normal and hover states.
Frequently Asked Questions
Can I customize hover effects?
Yes. Switch between Normal and Hover tabs to edit each state separately. The preview shows real hover effects when you mouse over the button.
What preset styles are available?
Eight presets: Flat, Gradient, Outline, Rounded, Pill, 3D, Neumorphism, and Glassmorphism. Click any to apply instantly, then customize further.
Does it support gradients?
Yes. Toggle the gradient option to use a two-color linear gradient background. Both normal and hover states can have independent gradient settings.