Center Split Fill Button

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

【演出内容】
- ホバーすると、ボタンの中央から左右2方向へ塗りが同時に広がって面を覆う
- 中心から外へ開くため、ラベルの中央から色が反転していく

【品質要件】
- 広がる時間は0.35秒前後。左右の広がりは完全に対称にする
- 塗りは角丸の内側に収める
- 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 fill expands from the center of the button toward the left and right at the same time
- Because it opens outward from the middle, the label inverts starting from its center

[Quality requirements]
- The expansion takes about 0.35s and must be perfectly symmetrical
- Clip the fill inside the rounded corners
- 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