Background Fade (背景フェード)

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

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

ホバーすると、枠線の色がフェードインしたり切り替わったりします。

[適用する場所]にボーダーフェード(Border Fade)のホバーエフェクトを追加してください。
ポインターが要素に乗っている間、枠線が落ち着いた色からアクセントカラーへなめらかにフェードするようにしてください。控えめに、動きやサイズ変化はつけません。
何もずれないよう枠線の太さはどちらの状態でも同じにし、キーボードフォーカスでも同じ効果を出してください。

ホバーすると、色付きの背景が片方の端から要素全体をなぞるように広がります。

[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。

ホバーすると塗りつぶしの背景が消え、枠線だけのボタンになります。

[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。

ホバー中、要素が浮き上がったあと上下にゆらゆらと揺れ続けます。

[適用する場所]にボブ(Bob)のホバーエフェクトを追加してください。ハング(hang)とも呼ばれます。
要素が少し浮き上がり、ポインターが乗っている間は上下にやさしく揺れ続け、離れたら元の位置に戻るようにしてください。ゆっくり、やわらかく。
揺れのループはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。