CSS Button Generator
Create beautiful, accessible buttons with custom styles, states, and effects. Generate production-ready CSS instantly.
Quick Presets
Customize Button
Preview
Generated CSS
.custom-button {
background-color: #3b82f6;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.custom-button:hover {
background-color: #2563eb;
color: #ffffff;
transform: translateY(-2px);
}
.custom-button:active {
background-color: #1d4ed8;
color: #ffffff;
transform: translateY(0);
}
.custom-button:disabled {
background-color: #93c5fd;
color: #ffffff;
opacity: 0.6;
cursor: not-allowed;
}When to Use This Tool
Create eye-catching CTAs that drive conversions with bold colors, shadows, and hover effects.
Recommended: Marketing Pages
Design consistent submit, cancel, and reset buttons with proper disabled states.
Recommended: Forms & Inputs
Build compact icon-only buttons for toolbars, navigation, and interactive controls.
Recommended: Toolbars & Navigation
Customize hover, active, and disabled states to provide clear user feedback.
Recommended: Interactive Elements
Generate consistent button styles that match your brand guidelines and design tokens.
Recommended: Component Libraries
Create buttons with proper contrast ratios, focus states, and disabled styling.
Recommended: Inclusive Design
How It Works
Choose a preset from 10 professionally designed button styles or start from scratch
Select button type (Solid, Outline, Ghost, or Gradient)
Customize colors, borders, shadows, padding, and typography
Configure hover, active, and disabled states
Add optional icons on left or right side
Preview button in all states (normal, hover, active, disabled)
Copy production-ready CSS code
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between button types?
Solid buttons have filled backgrounds, Outline buttons have transparent backgrounds with borders, Ghost buttons are minimal with no border, and Gradient buttons use background gradients for a modern look.
How do I add icons to my buttons?
Select an icon position (Left or Right), then choose from available icons. The CSS includes flexbox properties to properly align icons with text. You'll need to add your own icon HTML/SVG.
Can I use gradient backgrounds?
Yes! Switch to the Gradient button type and use the Effects section to customize the background-image property with CSS gradients.
How do I ensure my buttons are accessible?
Use sufficient color contrast (WCAG AA requires 4.5:1 for normal text), provide clear hover/focus states, ensure disabled buttons look distinctly different, and use appropriate cursor styles.
What CSS properties control button states?
State styles use pseudo-classes: :hover for mouse hover, :active for click/press, and :disabled for disabled buttons. Each can have different colors, transforms, and effects.
Can I animate my buttons?
Yes! Use the transition property to animate changes, and add transforms (like translateY or scale) to hover/active states for smooth animations.
How do I make responsive buttons?
Use relative units (em, rem) for padding and font-size, or create media queries to adjust button sizes on different screen sizes. The generated CSS can be extended with responsive breakpoints.
What's the best practice for button shadows?
Use subtle shadows for depth (2-4px blur), increase shadow on hover to show interactivity, and reduce or remove shadow on active state to simulate a press effect.