Watch
Interactive states (hover, focus, active) 0:51
A 51-second explainer of Interactive states (hover, focus, active), narrated over the same demo you can try yourself.
Try the interactive Interactive states (hover, focus, active) demo
What this video covers
Every interactive element lives in several states - default, hover, focus, active, disabled - and each is a piece of feedback. They tell people what's interactive, where they are, and that the thing heard them. Designing only the default state leaves an interface that looks dead, loses keyboard users, and never confirms a tap.
Resting, the control just sat there. Hover lifted it - "this reacts". Tab to it and a clear focus ring said "you're here now". Press and it pushed back, confirming the hit. Each state was a tiny answer to a question you were silently asking - and a button with only its default state answers none of them.
