Isometric Press Button
アイソメ押下
Generation Prompt
【対象要素】 - サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する 【演出内容】 - 斜め投影で厚みを表現したボタン。厚みは左下方向に伸びている - ホバーすると、その厚みの方向に沿って斜めに押し込まれ、厚みが縮む 【品質要件】 - 移動方向と厚みの方向を必ず一致させる(別方向に動くと立体感が崩れる) - 変化時間は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] - The button's depth is drawn in an oblique projection, with the thickness extending toward the lower left - On hover it is pressed diagonally along that same axis and the thickness shrinks [Quality requirements] - The direction of travel must match the direction of the thickness (moving any other way breaks the illusion) - Duration about 0.3s. Keep the shadow hard-edged and treat it as a surface, not a blur - 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
Prompts and demo code are free to use in your own projects. See About.