光沢スイープ
ホバーすると斜めの光がツヤッと走り抜ける。ボタンやバナーを一段リッチに見せる。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- プレミアム・限定などリッチに見せたいボタン
- バナーやカードの一段上の質感
- ホバーで一度だけ光らせたい
- 避ける場面
- 常時光らせる（注意を奪う）
- 文字が薄く光で読めなくなる配色
- focus で何も起きないまま使う
- 構成要素
- ボタン
- ラベル
- 光沢帯
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）。focus-visible でも光沢が1回走り輪郭が出る
- 支援技術
光沢は ::after の装飾。focus-visible で同じ光沢と輪郭を出す。reduced-motion では光沢を走らせない
- 動き
斜めの光が left -120%→140% を 0.6s ease で1回走る。戻りは即時。reduced-motion では無し
デザインの要点
- 光は hover に入ったとき 1 回だけ走り、離れたら transition なしで左へ戻す。戻りも動かすと光が往復して安っぽい
- 光の帯は幅 60%・skewX(-20deg)。垂直の帯はガラスではなくスキャンラインに見える
- 白 55% のグラデーションで、中央だけ明るく両端は透明。単色の帯は「光」ではなく「板」が横切る
- タッチはタップで 1 回走らせて 700ms で戻す。hover が無い端末では何も起きないままになる
コード（コピーして使えます）
<button class="shine-btn">Premium</button>