光るグラデーションボタン
ホバーで外側がふんわり光るグラデーション CTA ボタン。お問い合わせ・資料請求・申込ボタンに最適。CSS のみ実装で JS 不要。
解説
光るグラデーションボタンは、UI コンポーネントカテゴリの「ボタン」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
ホバー時に外側がふわっと光るグラデーションボタン。CTA・お問い合わせボタンに最適な視線誘導効果。CSS のみで実装、JS 不要。
CTA ボタンの周りがふわっと発光する演出を、box-shadow の多重指定と :hover 時の拡大・色変化だけで実装したパターンです。サイトの最終 CTA や、目立たせたいボタンに最適。
グラデーションの色を変えるだけで、ブランドカラーに合わせて柔軟に変更可能。CSS 変数で色管理することをおすすめします。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
アニメーションのタイミング（duration / easing）は CSS の transition や animation プロパティで簡単に調整できます。サイトの世界観に合わせて微調整してください。
注意点 / カスタマイズ時のポイント
過度に光らせるとチープに見えるので、ホバー時のみ・短時間で・控えめに発光させるのがコツです。filter: blur() を併用すると更にふわっとした光に。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
色を変えたい
background: linear-gradient(...) の色値を変更してください。CSS 変数で --from / --to に切り出すと管理しやすいです。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
Tailwind CSS でも実装できますか？
可能です。クラスベースのスタイルを Tailwind のユーティリティクラスに置き換えれば同じ動作になります。アニメーション・疑似要素については
@apply や arbitrary values が必要な場合があります。Web アクセシビリティ的に問題ありませんか？
<button> タグを使用しているため、キーボード Tab フォーカス・Enter / Space キー操作・スクリーンリーダー読み上げに対応します。フォーカスリングは visible のままにしておくことをおすすめします。