Tailwind CSS Academy · Lesson

Button Variants and States

Create primary, secondary, outline, and ghost button variants with hover, focus, active, and disabled states using Tailwind utilities.

Why Button Variants Matter

Buttons are one of the most interactive elements on a page, and users rely on visual cues to understand their purpose. Button variants communicate intent: a primary button drives the main action, a secondary button provides an alternative, and an outline or ghost button offers a subtle option.

With Tailwind, you achieve all of these without writing any custom CSS. Each variant is just a different combination of utility classes applied to the same <button> element.

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Primary Button
</button>

The Primary Button Pattern

A primary button uses a solid background color to attract maximum attention. The pattern combines padding utilities, a background color, white text, and a rounded corner class.

Adding hover:bg-blue-700 darkens the button on hover, providing clear feedback that the element is interactive. The font-semibold class increases the visual weight of the label.

<button class="px-5 py-2.5 bg-blue-600 text-white font-semibold rounded-lg
           hover:bg-blue-700 active:bg-blue-800
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           transition-colors duration-150">
  Get Started
</button>

All lessons in this course

← Back to Tailwind CSS Academy