光がスライドするシャインボタン
ホバーした瞬間、ボタンの表面を 白い光が斜めに一閃する シャインエフェクトです。光の正体は ::before 疑似要素で、透明から白へ、また透明へと変わる linear-gradient を skewX(-25deg) で斜めに傾けた帯。
解説
ホバーした瞬間、ボタンの表面を白い光が斜めに一閃するシャインエフェクトです。光の正体は ::before 疑似要素で、透明から白へ、また透明へと変わる linear-gradient を skewX(-25deg) で斜めに傾けた帯。普段は left:-100% でボタンの左外に隠れていて、:hover で left:130% まで transition で動かすことで、光が左から右へ走り抜けます。ボタンの overflow:hidden で帯がはみ出さないよう収めています。
使いどころ
- 「PREMIUM」「限定」など特別感を出したい高級系の CTA
- 濃い背景に映える、上質なブランドサイトのボタン
- 料金プランの上位プランを目立たせたいとき
光の強さは rgba(255,255,255,.5) の透明度で、走る速さは transition:left .6s の秒数で調整します。光の角度は skewX の値で変えられます。注意点として、本体の background はグラデーションなので、ブランドカラーに合わせて 2 色を差し替えてください。動きを抑えたい場合は prefers-reduced-motion での配慮が望ましいです。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
光が走るスピードを変えられますか
::before の transition:left .6s の秒数を変えると速さが変わります。短くするとシャープに、長くするとゆったり流れます。光の強さは白の rgba 透明度で調整できます。
JavaScript は必要ですか
不要です。光のスライドは疑似要素と CSS の :hover、transition だけで動いています。ホバーできないスマホでは光らないため、必要ならタップ時に発火させる工夫を足してください。