シャインスイープ ボタン
このスニペットは、マウスを乗せると光の帯がボタンの上を斜めに横切る「シャインスイープ」効果のボタンです。仕組みは ::before 疑似要素に半透明のグラデーションを敷き、初期位置を left:-100% でボタンの外に置いておき、 :hover で left:150% まで移動させるだけ。
解説
このスニペットは、マウスを乗せると光の帯がボタンの上を斜めに横切る「シャインスイープ」効果のボタンです。仕組みは ::before 疑似要素に半透明のグラデーションを敷き、初期位置を left:-100% でボタンの外に置いておき、:hover で left:150% まで移動させるだけ。transition で帯がスーッと通り抜けます。本体には overflow:hidden を掛け、帯がボタンの外にはみ出さないようにしています。JavaScript は不要です。
向いている用途
- 登録・購入・申し込みなど、押させたい主要 CTA ボタン
- ダークな背景の上で、金色や白の帯を上品に光らせたいとき
- ランディングページの目立たせたい一点もの
帯の色は ::before のグラデーション、流れる速さは transition の秒数で調整します。枠線や文字色をブランドカラーに合わせれば自然に馴染みます。注意点として、光の演出は控えめに使うほど高級感が出ます。多用するとうるさく見えるため、ページ内の主役ボタンに絞るのがおすすめです。動きを避けたい利用者向けに prefers-reduced-motion で帯を止める配慮も検討してください。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
光の帯の色を変えられますか
変えられます。before 疑似要素のグラデーション部分の色を編集してください。背景や枠線の色とあわせて調整すると、ブランドカラーに沿った自然な光り方になります。
光が流れる速さは調整できますか
できます。hover 時の動きを制御している transition の秒数を変更してください。値を小さくすると素早く、大きくするとゆっくり帯が通り抜けます。