Hover, active, and keyboard focus
State variants let you style interaction without writing separate selectors. Examples include hover:bg-blue-700, active:scale-[0.98], and focus-visible:outline-*. Hover is a pointer affordance; focus-visible is essential for keyboard users. Do not remove the browser outline unless you replace it with a visible, sufficiently contrasting focus indicator.
Use transitions sparingly. A small color or shadow transition can clarify feedback, but animation should not delay interaction or make controls feel sluggish.
Accessible button states
<button class="rounded-lg bg-blue-600 px-4 py-2.5 font-semibold text-white transition-colors hover:bg-blue-700 active:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
Save changes
</button>đź’ˇ The default state has strong contrast. Hover and active states provide pointer feedback, while
focus-visible draws a visible outline for keyboard navigation. transition-colors limits the transition to color-related properties rather than animating everything.Knowledge Check
Why should a custom button retain a visible focus indicator?