Hover, Focus and Active
Interactive styling recap with combined states.
Syntax
class="hover:bg-cyan-600 active:scale-95"Interactive utilities react to user actions. You can combine several on one element for a polished feel.
hover:on pointer over.focus:when focused.active:while pressed.focus-visible:for keyboard focus only.
Add transition so changes animate smoothly.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer gives a submit button a darker shade on hover, a ring on focus, and a slight scale-down on active press — all without JavaScript.
- A navigation link shows an underline on hover and a bold weight on focus to satisfy both mouse and keyboard navigation styling.
- A card's shadow deepens on hover with hover:shadow-lg to reinforce that the card is a clickable link target.
More examples
Combined hover, focus, active
Three state variants cooperate: hover changes color, focus adds a ring, and active shrinks the button slightly to simulate a press.
<button
class="bg-blue-600 text-white px-5 py-2 rounded
hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-400
active:scale-95
transition"
>
Submit
</button>Link with multiple states
Each state variant adds a distinct visual cue — underline on hover, ring on focus, darker color on active — covering all interaction modes.
<a
href="/pricing"
class="text-indigo-600 no-underline
hover:underline hover:text-indigo-800
focus:outline-none focus:ring-1 focus:ring-indigo-500
active:text-indigo-900"
>
View Pricing
</a>Card hover with shadow lift
hover:shadow-lg and hover:border-indigo-200 simultaneously deepen the shadow and tint the border to signal the card is interactive.
<div
class="bg-white rounded-lg p-6 border
hover:shadow-lg hover:border-indigo-200
transition duration-200"
>
<h3 class="font-semibold">Product Name</h3>
<p class="text-sm text-gray-500 mt-1">Category</p>
</div>
Discussion