Color Fade Button

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

【演出内容】
- 通常時は落ち着いた面色のボタン。ホバーすると背景色がアクセント色へなめらかに転調する
- 背景の転調に合わせて枠線とラベルの色も同時に切り替わり、面全体が一体で変化して見える
- ホバーを外すと同じ速度で元の色へ戻る

【品質要件】
- 変化時間は0.3〜0.4秒。色だけが変わり、位置・サイズは一切動かさない
- ホバー時のラベルと背景のコントラスト比は4.5:1以上を保つ
- 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 a muted surface color. On hover the background transitions smoothly to the accent color
- The border and the label change color at the same time, so the whole surface reads as one piece changing
- On hover out it returns to the original color at the same speed

[Quality requirements]
- Duration 0.3-0.4s. Only the color changes; position and size never move
- Keep at least 4.5:1 contrast between the label and the background in the hover 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