The
active:
state is very brief, applying styles only while an element is being pressed.
It's often confused with the
focus:
state, which persists after a click until another element is focused.
This button uses
active:bg-blue-800
and
active:scale-95
.
The styles apply
only while the mouse button is held down
or the element is tapped.
This button uses
focus:ring-4 focus:ring-purple-300
.
After clicking, the ring style
persists until you click elsewhere
or tab away.
Key Takeaway (Gotcha):
Click and hold the "Active State Button" – its styles are temporary. Then, click the "Focus State Button" – its ring style remains after you release the click. This clearly shows that
active:
is for immediate press feedback, while
focus:
is for indicating the currently selected interactive element.