Sink (シンク)

要素が内側へ沈んでから戻り、物理ボタンを押したように見えます。

[適用する場所]にプッシュ(Push)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく小さく沈み、弾むように通常のサイズへ戻って、物理ボタンを押し込んだように見せてください。
ループさせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。

ホバーすると、要素が浮かぶように数ピクセル上に移動します。

[適用する場所]にフロート(Float)のホバーエフェクトを追加してください。リフト(lift)、レイズ(raise)とも呼ばれます。
ポインターが乗っている間は要素が少し浮き上がったままになり、離れたら元に戻るようにしてください。なめらかでやさしく、弾みはつけません。
周りのレイアウトをずらさず見た目だけ動かし、キーボードフォーカスでも同じ効果を出してください。

ポインターが乗っている間、要素がなめらかに少し縮小します。

[適用する場所]にシュリンク(Shrink)のホバーエフェクトを追加してください。スケールダウン(scale down)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し縮小し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。

ホバーすると要素の下にやわらかい影が現れたり濃くなったりして、浮き上がって見えます。

[適用する場所]にホバーシャドウ(Hover Shadow)のエフェクトを追加してください。ドロップシャドウオンホバー(drop shadow on hover)、エレベーションオンホバー(elevation on hover)とも呼ばれます。
ポインターを乗せている間は要素の下のやわらかい影が濃く広がって浮き上がって見え、離れると元に戻るようにしてください。要素自体は動かしません。
ライトテーマでもダークテーマでもなじむよう影は控えめにし、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると要素が横方向に斜めにゆがみます。

[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。

ホバーすると、要素の一辺に吹き出しの小さな三角形が現れます。

[適用する場所]に吹き出し(Speech Bubble)のホバーエフェクトを追加してください。バブル(bubble)とも呼ばれます。
要素の一辺の裏から小さな三角形のしっぽがスライドして出てきて吹き出しの形になり、ポインターが離れたら引っ込むようにしてください。素早くなめらかに。
しっぽは要素と同じ色にしてひとつの形に見えるようにし、キーボードフォーカスでも同じ効果を出してください。

ホバーすると、要素の縁の内側に内枠の線が現れます。

[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。