Saturation Boost Button
彩度ブースト
Generation Prompt
【対象要素】 - サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する 【演出内容】 - 通常時は彩度を落としたモノクロ寄りの状態。ホバーすると本来の色が戻り、鮮やかに発色する - 明度もわずかに上がり、色が「点いた」ように見える 【品質要件】 - 変化時間は0.3〜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] - At rest the button is desaturated, close to monochrome. On hover its true color returns and it becomes vivid - Brightness rises slightly as well, so the color reads as switching on [Quality requirements] - Duration 0.3-0.4s. Change saturation and brightness together - Keep the label legible even in the desaturated state - 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.