Push 3D Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- 通常時は下側に厚みのある立体的なボタン。ホバーすると厚みが潰れてボタンが沈み込む
- 物理的なキーを押し込んだときのような手応えを、影の厚みの変化だけで表現する

【品質要件】
- 沈む量と厚みの減少量を一致させ、底面が動いて見えないようにする
- 変化時間は0.2〜0.3秒と速めにする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- At rest the button has visible thickness underneath it, giving it a solid, physical look. On hover that thickness collapses and the button sinks in
- Express the feel of pressing a real key entirely through the change in the thickness of the shadow

[Quality requirements]
- Match the travel distance to the reduction in thickness so the base does not appear to move
- Keep the duration short, 0.2-0.3s
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read