柔らかいグローボタン
このボタンは、ホバーで周囲がやわらかく光るグローエフェクトを持つ白い丸みのある CTA です。光は複数重ねた box-shadow で表現していて、白い近い光から外側のピンク系の淡い光まで段階的にぼかすことで、にじむような上品な発光を作っています。
解説
このボタンは、ホバーで周囲がやわらかく光るグローエフェクトを持つ白い丸みのある CTA です。光は複数重ねた box-shadow で表現していて、白い近い光から外側のピンク系の淡い光まで段階的にぼかすことで、にじむような上品な発光を作っています。同時に translateY(-2px) でわずかに浮き上がり、触れたときの反応が伝わります。装飾は影だけで実現しており、JavaScript は使いません。
使う場面
- コスメ・フレグランスブランドの「Discover More」など上質さを出す導線
- 暗い背景のヒーローに置く、主役を張るボタン
- 会員登録や予約など、丁寧な印象を残したい CTA
光の色や広がりは box-shadow のぼかし半径・広がり・色を変えて調整します。にじみを強くしたいときはぼかし半径を大きく、控えめにしたいときは小さくします。発光は暗い背景でこそ映えるため、明るい背景では効果が弱く見える点に注意します。浮き上がりの動きが気になる利用者向けに prefers-reduced-motion で transform を抑え、影の変化だけ残す形にしておくと親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
光は画像やフィルターを使っていますか
使っていません。複数の box-shadow を重ねて、近い白い光と外側の色の付いた淡い光を段階的にぼかすことで発光を表現しています。画像やぼかしフィルターは不要です。
光の色や強さを変えられますか
ホバー時の box-shadow の色とぼかし半径、広がりの値を変えれば調整できます。色をブランドカラーにすればトーンを合わせられ、ぼかし半径を大きくするとにじみが強くなります。