§16-08Motion

Hover micro-interaction

ボタンに触れたとき小さく弾む反応を返す。

押せる要素だと伝え、操作に手応えを与える。ボタンとリンクの区別がつきにくいデザインで誤操作を減らす。

実装のポイント

transform と box-shadow だけを transition させ、width や margin を動かさない。hover が無いタッチ端末向けに :active でも同じ手応えを返す。