Skill ID: Interactive_37
Description: Give visual feedback when a user presses down on an element.
Where to apply: Buttons, clickable links.
Key Tailwind Classes:
active:bg-blue-800
,
active:scale-95
Gotcha:
The
active:
state is very brief (only while the mouse button is down or element is tapped). It's sometimes confused with the
focus:
state, which persists after clicking until something else is focused.
Hover over and click the button below to see the
active:
state in action. It will turn darker blue and slightly shrink while you are pressing the mouse button down.
Relevant classes on the button:
bg-blue-500
,
hover:bg-blue-600
,
active:bg-blue-800
,
active:scale-95
.