Loading…
Loading…
Design beautiful buttons with visual controls — export CSS, React JSX, or Tailwind classes.
.btn {
background-color: #6366f1;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border: none;
border-radius: 8px;
box-shadow: 0px 4px 14px 0px #6366f14d;
transition: all 200ms ease;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background-color: #4f46e5;
color: #ffffff;
box-shadow: 0px 6px 20px 0px #6366f166;
transform: scale(1.02) translateY(-1px);
}
.btn:active {
transform: scale(0.98) translateY(0px);
}
.btn:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}
Common questions about the CSS Button Generator.
Start with padding, font-size, border-radius, and background-color. Add hover and active states for interactivity. This tool generates complete button styles with customizable size, shape, color, shadow, and animation — ready to copy into your CSS.
Good buttons have sufficient size (min 44×44px touch target), clear visual hierarchy (primary/secondary/ghost variants), obvious hover/active feedback, and accessible contrast (4.5:1 text-to-background). Use consistent border-radius and spacing across your UI.
Primary: solid background with white text. Secondary: lighter background or outline. Ghost: transparent with text color only. Use CSS custom properties for the color system so all variants stay consistent. This tool generates all three variants from a single base color.
Use <button> for actions (submit, toggle, open modal) and <a> for navigation (links to pages/URLs). This matters for accessibility — screen readers announce them differently, and keyboard behavior differs (Enter vs Enter+Space). Style both consistently but use the correct semantic element.