Hover and Press: Make the Interface Answer Back

The cheapest motion with the highest payoff

Feedback motion is the smallest animation you can ship and the one users notice most, because it answers a question they are always asking: did the interface hear me? A button that does nothing when pressed feels broken even when it works. A button that dips slightly feels solid.

This is not decoration. It is the interface confirming receipt.

Three states worth animating

• Hover signals “this is interactive” before the click. A small lift plus a shadow is the classic, and it reads as the element rising toward the cursor.
• Focus is hover for the keyboard. It must be visible and it must not be removed. Wire it to the same treatment as hover so keyboard users get the same confidence.
• Press is the payoff. A quick scale-down on :active makes the element feel physical, like it absorbed the tap.

Try all three below. Hover the card, tab to it, then press the button:

Keep it fast and small

Feedback is the most frequently triggered motion in your whole product. The user sees it on every hover, every tap. So it must be the shortest and most restrained:

• Hover lift: 150 to 200ms, a 2 to 4px translate.
• Press: about 100ms, scale to 0.95.

The rule of thumb: the more often a motion fires, the shorter and subtler it should be. A press you trigger a hundred times a day should never call attention to itself.

How to brief it

Primary button: on hover, translateY -2px plus shadow, 160ms ease-out. On active, scale 0.96, 100ms. Focus-visible matches hover.

Buildable, and it covers the keyboard case, which is the one most briefs forget.

Next

See the full Animation Vocabulary, or continue with Scroll reveal.