光るグラデーションボタン
ホバーで外側がふんわり光るグラデーション CTA ボタン。お問い合わせ・資料請求・申込ボタンに最適。CSS のみ実装で JS 不要。
解説
このボタンは、紫系のグラデーション地に加えて、ボタンの一回り外側へ淡い光を滲ませる二層構造で作られています。光の正体は ::before 疑似要素で、本体より少し大きい inset:-2px の矩形に filter:blur(14px) をかけたもの。通常は opacity:0 で隠れていて、:hover の瞬間だけ不透明度が上がり、同時に本体が translateY(-2px) でわずかに浮き上がります。すべて CSS のトランジションで完結し、JavaScript は使いません。
使いどころ
- サイト内で最も押してほしい主役のボタン（資料請求・無料登録・お問い合わせ）
- 暗めの背景やヒーローセクションに置く CTA。光が背景に溶けて視線を集めます
- 料金表で「おすすめプラン」だけを目立たせたいとき
色を変えるときは、本体と ::before の linear-gradient の停止色を同系統で揃えると光が自然になじみます。光が強すぎる場合は opacity の値や blur の半径を下げて調整してください。1ページに何個も置くと特別感が薄れるため、強調したいボタンに絞るのがコツです。明るい背景では光が見えにくいので、::before の色を濃いめにすると効果が伝わります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
光の色や強さはどこで変えますか
光は::before疑似要素のlinear-gradientとfilter:blurで作っています。色は本体と::before両方のグラデーション停止色を揃えて変更し、強さはhover時のopacity値（既定0.8）やblurの半径（既定14px）で調整します。
JavaScriptは必要ですか
不要です。ホバー時の発光も浮き上がりもすべてCSSのtransitionと:hoverだけで動くので、HTMLとCSSを貼るだけで動作します。