🎨CSS & Color

Modern Button System

Styling for Primary, Secondary, and Ghost buttons.

Explanation

A consistent button system helps users understand the primary action on a page.

Examples

Primary

Output

bg: indigo-600, text: white

Ghost

Output

border: slate-200, bg: transparent

Code Examples

CSS

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-primary { background: #6366f1; color: white; }
.btn-primary:hover { background: #4f46e5; }

Try it Now

Open in Button Generator

💡 Tips

Primary buttons should be the most visually prominent
Use a subtle background on hover for ghost buttons
Ensure touch targets are at least 44px tall

⚠️ Common Pitfalls

Don't forget the :focus-visible state for accessibility