カーソル位置に光が追従
ボタンの上でマウスを動かすと、 カーソルの位置に光のスポットが追従 する高級感のあるインタラクションです。光の正体は ::before 疑似要素に置いた円形の radial-gradient で、その位置を CSS 変数 --x --y で制御します。
解説
ボタンの上でマウスを動かすと、カーソルの位置に光のスポットが追従する高級感のあるインタラクションです。光の正体は ::before 疑似要素に置いた円形の radial-gradientで、その位置を CSS 変数 --x --y で制御します。JavaScript の mousemove で getBoundingClientRect() からボタン内の相対座標を求め、style.setProperty で変数を更新する、という最小構成です。光は :hover 時だけ opacity でふわっと表示されます。
使いどころ
- 申し込み・購入などの主要 CTA ボタン
- 料金プランの「選択する」ボタン
- 暗い背景のヒーローに置く目立たせたいボタン
光の色や強さは radial-gradient の rgba(255,255,255,.45) を変えるだけで調整でき、ブランドカラーに寄せることもできます。光の大きさは width:120px の値で決まります。背景が暗いほど効果が映えるので #1a1a2e 系がおすすめです。JS が必須の演出なので、無効環境では普通のボタンとして成立するよう、配色やラベルだけで完結させておくと安全です。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
この演出に JavaScript は必要ですか
はい。カーソル座標を取得して CSS 変数 --x --y を更新する処理に JavaScript を使います。数行で済みますが、JS を切ると光は固定位置のまま動かなくなります。
光の色をブランドカラーに変えられますか
変えられます。::before の radial-gradient 内の rgba(255,255,255,.45) を任意の色に置き換えてください。彩度の高い色にすると主張が強くなるので、暗い背景では白っぽく抑えるとなじみます。