Motion · Interaction
Hover
Small lifts and nudges that hint an element is interactive. Only on devices with a real pointer.
Specs#
| Property | transform, box-shadow, color |
| Duration | 150–200ms |
| Easing | ease / --ease-out |
| Gate | @media (hover: hover) and (pointer: fine) |
| Built with | CSS only |
Guidelines#
Use for
- Cards and links in a grid
- Arrows that point to the next step
Avoid
- Hover effects on touch devices — they stick after a tap
- Large movement on lists the user scans often