Hover Shadow (ホバーシャドウ)

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

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

ホバーすると、要素のまわりに色付きの光のハローが現れます。

[適用する場所]にグロー(Glow)のホバーエフェクトを追加してください。ネオングロー(neon glow)とも呼ばれます。
ポインターが乗っている間は要素のまわりにやわらかな色付きのハローがフェードインし、離れたらフェードアウトするようにしてください。やさしく、動きはつけません。
ハローがレイアウトに影響しないようにし、キーボードフォーカスでも同じ効果を出してください。

ホバーすると要素が数ピクセル下がり、ページに押し込まれたように見えます。

[適用する場所]にシンク(Sink)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が少し下がってそのまま留まり、ページに押し込まれたように見せ、離れたら元の位置に戻るようにしてください。なめらかに、弾まずに。
周りのレイアウトはずらさずに見た目だけを動かし、キーボードフォーカスでも同じ効果を出してください。

半透明のオーバーレイが要素に色を重ね、ポインターが乗っていることを示します。

[適用する場所]にホバーステートレイヤー(Hover State Layer)を追加してください。ホバーステート(hover state)、ステートレイヤー(state layer)、ホバーオーバーレイ(hover overlay)とも呼ばれます。
ポインターを乗せている間、コンテンツ色の薄い半透明オーバーレイが要素の上にすばやくフェードインし、離れるとフェードアウトするようにしてください。
コントラストを損なわないようごく薄くし、フォーカス時と押下時にも同じレイヤーの仕組みを使ってください。

ホバーするとアイコンが下に落ちて見えなくなり、上から戻ってきます。

[適用する場所]にアイコンドロップ(Icon Drop)のホバーエフェクトを追加してください。
要素内のアイコンが下に落ちて見えなくなり、上から元の位置に戻ってくるようにしてください。素早く、着地はやわらかく。
ループさせずポインターが入るたびに一度だけ再生し、ラベルとボタンのサイズは変えないでください。

アイコンがボタンから漂うように抜けて消え、新しいアイコンがふわりと入ってきます。

[適用する場所]にアイコンフロートアウェイ(Icon Float Away)のホバーエフェクトを追加してください。
今のアイコンが上へ漂いながらフェードアウトし、新しいアイコンが下からふわりと浮かんでその位置に入るよう滑らかに切り替え、ポインターが離れたら逆の動きで戻してください。
切り替え中もボタンのサイズは固定し、キーボードフォーカス時にも同じ効果を出してください。