Building a Button

Assemble a polished button from utilities.

Syntaxbg-cyan-500 hover:bg-cyan-600 text-white px-5 py-2.5 rounded-lg transition

A good button combines padding, color, radius, a hover state, a focus ring, and a transition. Here is a complete recipe you can reuse.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer assembles a primary CTA button with hover, focus, and active states entirely from utility classes in under a minute.
A UI library defines variant button classes (primary, secondary, danger) by composing Tailwind utilities for each style.
A designer converts a Figma button spec to Tailwind markup by mapping each design property to the corresponding utility class.

More examples

Primary button

The button builds up from background, typography, spacing, and border-radius utilities, then adds interactive state layers with hover:, focus:, and active: variants.

<button
  class="bg-indigo-600 text-white text-sm font-medium
         px-5 py-2.5 rounded-lg
         hover:bg-indigo-700
         focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
         active:scale-95
         transition duration-150"
>
  Get Started
</button>

Secondary outline button

An outline style button replaces the solid background with a border, uses the brand color for text, and applies a light fill on hover.

<button
  class="border border-indigo-600 text-indigo-600 text-sm font-medium
         px-5 py-2.5 rounded-lg
         hover:bg-indigo-50
         focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2
         transition"
>
  Learn More
</button>

Danger destructive button

Swapping indigo for red utilities creates a semantically distinct danger button; disabled: utilities handle the unavailable state.

<button
  class="bg-red-600 text-white text-sm font-medium px-5 py-2.5 rounded-lg
         hover:bg-red-700
         focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2
         disabled:opacity-50 disabled:cursor-not-allowed
         transition"
>
  Delete Account
</button>

Discussion

Be the first to comment on this lesson.