Circle Fill Button

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

【演出内容】
- ポインタがボタンに触れた位置を中心に、円形の塗りが拡大してボタン全体を覆う
- どこから入ったかによって塗りの起点が変わる

【品質要件】
- 広がる時間は0.5秒前後。円は必ずボタン全体を覆いきる大きさまで拡大する
- 塗りは角丸の内側に収める
- ポインタを持たない環境では中央を起点にする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- A circular fill expands from the exact point where the pointer touched the button until it covers the whole surface
- The origin changes depending on where the pointer entered from

[Quality requirements]
- The expansion takes about 0.5s. The circle must grow large enough to cover the entire button
- Clip the fill inside the rounded corners
- On devices without a pointer, use the center as the origin
- 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