Understanding the difference between the brief `active:` state and the persistent `focus:` state.
This button primarily demonstrates the
active:
state. When you click and hold, its background (
active:bg-teal-700
) and scale (
active:scale-[0.98]
) change.
These changes are
only visible while the mouse button is pressed down
or the element is tapped.
Once you release, it returns to its normal state (unless it also gains focus, but we're minimizing focus styles here for clarity on `active:`).
This button also has
active:
styles (
active:bg-indigo-800
,
active:scale-95
) that apply during the click.
However, it
also has distinct
focus:
styles
(
focus:ring-4 focus:ring-indigo-300
).
After you click and release, the
active:
state ends, but the button
remains focused and displays the focus ring
until you click elsewhere or press Tab.
This demonstrates the "Gotcha":
active:
is very brief, while
focus:
persists after interaction.
active:
state is triggered only during the actual press/tap action. It's often confused with the
focus:
state, which can persist after a click/tap until another element gains focus.