A button that responds in the right 120 milliseconds feels alive. The same button without feedback feels broken, even when it works perfectly. The logic is identical; the experience is not.
We tend to talk about big things — flows, architecture, information design — and forget that users actually feel the product through its smallest moments. The hover. The press. The little settle after a panel opens.
Feedback is communication
A subtle transition can replace a paragraph of instructions. Use :active and :focus-visible states to tell the user exactly what is happening without a single word. The interface should always be answering the question: did that work?
Here is the baseline every interactive element deserves — a visible press, a clear keyboard focus ring, and motion that respects accessibility settings:
.button {
transform: translateY(0);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.button:active {
transform: translateY(1px);
}
.button:focus-visible {
outline: 2px solid #004fd8;
outline-offset: 2px;
}
A small budget, a big return
Micro-interactions are the cheapest craft in the toolbox. They cost a few lines of CSS and return a disproportionate amount of perceived quality. This is the rare place where a tiny investment reads as expensive.
- Loading: show motion, not a frozen screen
- Success: confirm, then get out of the way
- Error: explain, never blame
- Idle: hint at what is interactive before the user has to guess
Restraint is part of the craft
The trap is doing too much. Animation that draws attention to itself instead of the content becomes noise. A good micro-interaction is felt more than seen — you notice its absence, not its presence.
The best animation is the one the user never consciously registers, but would miss instantly if it were gone.
Spend your motion budget on transitions that explain change: where something came from, where it went, and why. Everything else is decoration, and decoration ages badly.