スライドフィルボタン
ホバーすると背景色が左から滑り込み、文字色が反転する。線画ボタンの定番演出。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 線画（アウトライン）ボタンの二次的な操作
- View More など控えめなCTA
- ホバーで反転の手応えが欲しいPC向け
- 避ける場面
- 主要CTA（塗りボタンの方が強い）
- タッチ中心の画面（:active でしか出ない）
- focus 時に演出が出ない状態のまま使う
- 構成要素
- ボタン
- 塗りつぶし面
- ラベル
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）。focus-visible でも hover と同じ塗りが出る
- 支援技術
反転後は白文字＋藍背景でコントラストを保つ。focus-visible には同じ反転に加えて輪郭を当て、reduced-motion では塗りを即時にする
- 動き
::before の scaleX 0→1 を 0.35s ease（左起点）、文字色 0.35s。左から塗る方向性。reduced-motion では即時
デザインの要点
- 塗りは ::before の scaleX 0→1 で描く。width を動かすと文字が押されて揺れ、transform なら文字は動かない
- transform-origin: left で「左から塗る」方向を固定する。中央起点だと両側から閉じる別の演出になる
- 文字色の transition も塗りと同じ 0.35s に揃える。ずれると塗りの途中で文字が背景と同化して読めない瞬間ができる
- focus-visible にも hover と同じ塗りを当てる。線画ボタンはフォーカスの輪郭だけだと枠線と区別がつかない
コード（コピーして使えます）
<button class="fill-btn">View More</button>