ソフトシャドウ浮遊ボタン

解説

ソフトシャドウボタンは、複数の影を重ねて紙がふんわり浮いているように見せるやわらかな印象のボタンです。実装の特徴は box-shadow をカンマ区切りで 3 段重ねている点で、近距離の薄い影・中距離・遠距離の大きく広がる影を組み合わせることで、単一の影より自然な立体感を出しています。いずれも rgba(0,0,0,.05) 前後と非常に薄く、輪郭をぼかして「やさしさ」を演出します。ホバー時は transform:translateY(-3px) で持ち上がり、影もさらに広がって浮遊感が強まります。

使う場面

• メディカル・ウェルネス・ヘルスケア系のやさしいトーンの CTA
• 白基調・余白の多いミニマルなデザイン
• 強すぎる主張を避けたい、上品な申込・予約ボタン

影の濃さは各 rgba の最後の透明度で調整します。背景が明るい色のときに最も映えるスタイルで、暗い背景では影が見えにくくなるため濃度を上げるか別スタイルを検討してください。角の丸みは border-radius、浮き上がり量はホバーの translateY の値で変えられます。CSS のみで動き JavaScript は不要です。影を多用しても文字色とのコントラストは確保しておきましょう。

使用例・適したシーン

• お問い合わせフォームの送信ボタン
• 資料ダウンロードの CTA
• ヒーローセクションの主要 CTA
• サブスク・申込ボタン