CSS Button Style Generator
Set colors, gradients, borders, radius, and shadow strength, then copy the CSS. Built for quick primary/secondary button exploration—not a full component library.
Design
Preview
CSS Output
.btn-primary {
background: #3B82F6;
color: #FFFFFF;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
border: 1px solid #1E40AF;
padding: 0.625rem 1rem;
font-weight: 600;
}
What this tool does
You adjust visual properties and get CSS you can paste into a stylesheet or component. It speeds up prototyping when you would otherwise nudge HEX values by hand for every variation.
How to use it
- Pick a solid background or enable a two-stop gradient.
- Set text color with enough contrast for the fill you chose.
- Add a border color if you want an outline or ghost style.
- Tune radius (sharp to pill) and shadow strength for elevation.
- Copy the CSS when the preview matches the role (primary vs secondary).
Habits that keep buttons usable
- Contrast first. Aim for at least 4.5:1 on label text. Check pairs in the Contrast Checker.
- Hierarchy. One strong primary style; quieter secondary and tertiary options.
- States. Plan hover, active, focus, and disabled—not only the resting look. Focus rings matter for keyboard users.
- Touch size. Keep padding large enough for roughly 44×44px targets on mobile.
- Tokens. Promote colors and radii to CSS variables if the button will live in a theme or dark mode.
Common button roles
- Primary: main action—strong fill, clear label (Submit, Buy, Continue).
- Secondary: alternate path—outline or softer fill (Cancel, Learn more).
- Gradient: marketing emphasis; still verify text contrast on both stops.
- Ghost / outlined: low visual weight with a visible border.
Frequently asked questions
Can I add a text shadow to a gradient button?
Yes. After you copy the base styles, add text-shadow in your CSS. Keep it subtle—heavy shadows can hurt readability at small sizes.
How should I size buttons responsively?
Prefer rem/em for padding and type so buttons scale with user font settings. Use media queries when mobile needs larger tap targets.
What makes a good disabled button?
Lower opacity (around 0.5–0.6), remove hover lift, and set pointer-events: none. Text should still be readable enough to understand the control exists.
Can these styles be animated?
Add short transitions on background, box-shadow, and transform for hover and active. Around 150–200ms ease keeps feedback snappy without feeling floaty.
How do I support dark mode?
Test on light and dark surfaces. Use CSS variables for background, text, and border so a theme switch can retarget tokens without rewriting every button class.
Related tools
Related tools
Related tools
Related Color and Design Tools
Hover State Color Preview Tool
Preview hover, active, and focus colors for buttons and links. Test states across backgrounds and ensure accessible contrast on interactions.
Monochromatic Palette Generator
Generate monochromatic color palettes from a single base color. Explore tints, tones, and shades for UI themes, charts, and branding.
Dynamic Color Palette with Time of Day
Generate color palettes that adapt to time of day—morning, afternoon, evening, and night. Preview transitions and export CSS variables.
Color Matching Game for Designers
Improve your color intuition. Guess the correct color from options based on a target HEX. Track score and adjust difficulty.
Brand Color Extractor (from URL)
Paste a website URL and extract dominant brand colors. Preview, copy HEX, and export as CSS variables or JSON.
Text Shadow CSS Generator
Create stunning text shadow effects with our interactive CSS generator. Design single or multiple layered shadows, customize colors, blur, and offset. Perfect for web designers and developers.
Real-Time Theme Preview Sandbox
Interactive theme customization tool for previewing and testing color schemes, typography, and spacing in real-time.
Typography Pairing Tool - Find Perfect Font Combinations
Discover and test beautiful font combinations for your web projects. Preview font pairs in real-time.
Typography Scale Calculator - Create Harmonious Text Hierarchies
Generate perfect typography scales using mathematical ratios. Create consistent, readable text hierarchies with our comprehensive typography scale calculator and export CSS, SCSS, or JSON.
UI Color Psychology Reference - Complete Guide to Color Emotions & User Behavior
Comprehensive reference guide to color psychology in UI design. Learn how colors affect user emotions, behavior, and decision-making with cultural considerations and accessibility guidelines.