Invert 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]
- On hover the background and label colors swap, inverting light and dark
- The border takes the background color as well, so it reads as switching to a solid filled button

[Quality requirements]
- Duration 0.3-0.4s. Keep 4.5:1 contrast both before and after the inversion
- Do not move position or size; carry the change purely through the color swap
- 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