← All motions
Fullscreen ↗

Isometric Press Button

アイソメ押下

No.
119
Category
Button
Tech
CSS
【対象要素】
- サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する

【演出内容】
- 斜め投影で厚みを表現したボタン。厚みは左下方向に伸びている
- ホバーすると、その厚みの方向に沿って斜めに押し込まれ、厚みが縮む

【品質要件】
- 移動方向と厚みの方向を必ず一致させる(別方向に動くと立体感が崩れる)
- 変化時間は0.3秒前後。影はぼかさず、面として扱う
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

Prompts and demo code are free to use in your own projects. See About.