Button Color Design Guide for Tailwind CSS

Button Color Hierarchy

A well-designed button system uses color to communicate importance. Primary buttons use your strongest color, secondary buttons are muted, and destructive buttons use red. Each needs hover, focus, active, and disabled states.

Complete Button System

<!-- Primary -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-medium px-5 py-2.5 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Save Changes
</button>

<!-- Secondary -->
<button class="bg-slate-100 hover:bg-slate-200 active:bg-slate-300 text-slate-700 font-medium px-5 py-2.5 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 transition-colors">
  Cancel
</button>

<!-- Destructive -->
<button class="bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-medium px-5 py-2.5 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
  Delete
</button>

<!-- Ghost -->
<button class="text-blue-600 hover:bg-blue-50 active:bg-blue-100 font-medium px-5 py-2.5 rounded-lg transition-colors">
  Learn More
</button>

<!-- Disabled -->
<button disabled class="bg-slate-200 text-slate-400 font-medium px-5 py-2.5 rounded-lg cursor-not-allowed">
  Unavailable
</button>

State Color Rules

• Default: Your base shade (blue-600)
• Hover: One shade darker (blue-700)
• Active/pressed: Two shades darker (blue-800)
• Focus: Ring in the same hue (ring-blue-500) with ring-offset
• Disabled: Use slate-200 background with slate-400 text, no hover effects

Outline Variant

<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-medium px-5 py-2.5 rounded-lg transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Outline Button
</button>