Outline Expand (アウトラインエクスパンド)

ホバーすると、同心円状の枠線のリングが要素から外側へ広がったり、内側へ縮んだりします。

[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。

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

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

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

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

グラデーションの枠線が要素の周りを動き、ポインターを乗せると広がります。

[適用する場所]にホバーボーダーグラデーション(Hover Border Gradient)のエフェクトを追加してください。
短いグラデーションのハイライトが枠線の一部に留まり、ポインターを乗せている間は枠線に沿って一定の速さで周回し、枠線全体がやわらかく光って明るくなるようにしてください。
枠線が動くのはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。

ホバーするとテキストの上に線が左・中央・右から伸びます。

[適用する場所]にオーバーライングロウ(Overline Grow)のホバーエフェクトを追加してください。
ポインターを乗せている間はテキストの上の線が中央から左右へ伸び、離れると中央へ縮んで戻るようにしてください。素早く滑らかに。
テキストがずれないよう線の分のスペースをあらかじめ確保し、キーボードフォーカス時にも同じ効果を出してください。

要素がすばやく大きくなり、弾むようにポンと元に戻ります。

[適用する場所]にポップ(Pop)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく膨らんで通常のサイズに戻り、小さく弾むようなポンとした動きにしてください。
大きいサイズのまま止めたりループさせたりせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。

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

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