流れる光グラデボタン
グラデーションが流れ、背後がぼんやり発光するボタン。CTAで視線を集めたいときに。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- LPで視線を集めたい唯一のCTA
- ダーク背景で発光させたいボタン
- ブランドのグラデーションを見せたい
- 避ける場面
- 1画面に複数置く（主役が競合する）
- 常時動く演出が邪魔になる業務画面
- reduced-motion 未対応のまま常時アニメーション
- 構成要素
- ボタン
- 流れるグラデーション
- 背後の発光
- 持っている状態
- 通常
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）
- 支援技術
発光 ::after は装飾。常時アニメーションは reduced-motion で止めて静止したグラデーションにする。白文字とグラデーションのコントラストを最も明るい色で確認する。focus-visible の輪郭あり
- 動き
background-position を 4s linear で無限に流し、ぼかした ::after が同期して発光。視線誘導。reduced-motion では停止
デザインの要点
- グラデーションの両端を同じ色（#2b50c7）にし background-size 300% で流す。端の色が違うと 4 秒ごとに継ぎ目が見える
- 発光は ::after に background: inherit を渡して blur(14px) するだけ。別の色を書くと本体と光がずれて流れる
- isolation: isolate で z-index:-1 の光をボタンの背後に閉じ込める。無いと親の背景の下に潜って消える
- 無限アニメーションは 1 画面に 1 つ。2 つ以上あると視線が分散し、CTA としての意味が無くなる
コード（コピーして使えます）
<button class="glow-btn">Get Started</button>