Opacity Fade Button
半透明フェード
Generation Prompt
【対象要素】 - サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する 【演出内容】 - ホバーするとボタン全体の不透明度がすっと下がり、押せることだけを最小限に伝える - ホバーを外すと同じ速度で元の不透明度に戻る 【品質要件】 - 変化時間は0.25秒前後。速すぎず、もたつかせない - 不透明度は0.4程度までとし、ラベルが読めなくなるほど薄くしない - prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする - ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない
[Target element] - Apply to a single button on your site (a CTA, a link button, a form submit button, etc.) [Motion] - On hover the whole button fades down in opacity, signalling "you can press this" with the smallest possible cue - On hover out it returns at the same speed [Quality requirements] - Duration around 0.25s. Not too fast, but never sluggish - Do not go below about 0.4 opacity; the label must stay readable - 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.