3D 立体プッシュボタン
box-shadow と transform で実装する 3D 押下感ボタン。クリックでボタンが「沈む」演出により、リアルな操作感を提供。CSS のみ・3 色バリアント付き。
解説
3D 立体プッシュボタンは、下方向のソリッドな box-shadow（0 6px 0 #c63a4d）でボタンの「厚み」を描き、その下に柔らかい影を重ねて床からの浮きを表現します。クリック時には :active で translateY(4px) によりボタンを沈め、同時に厚みの影を 6px から 2px へ縮めることで、物理的に押し込まれる感触を再現しています。JavaScript は使わず、CSS の transform と影の差し替えだけで完結します。
使う場面
- ゲームやキッズ向けサイトの楽しい操作ボタン
- 押した実感を強く出したい申込・購入ボタン
- スマホアプリ風のフィジカルな UI
厚みの色（ここでは #c63a4d）は表面色より一段暗いトーンにすると立体感が自然になります。沈み込みの深さは translateY と影の差で決まるので、両者をセットで調整してください。transition が .12s と短く小気味よい反面、動きに敏感な利用者向けに prefers-reduced-motion で transform を抑える配慮も検討すると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
押し込む深さや色を変えられますか
厚みは box-shadow の縦オフセット（通常時 6px、押下時 2px）と :active の translateY(4px) で決まります。これらの数値を揃えて増減すれば沈み込みの量を調整できます。色は表面の #f5576c と厚みの #c63a4d を変え、厚み側を少し暗めにすると立体感が保てます。
押した感じが急すぎる気がします
transition の .12s を .2s 程度に伸ばすと、もう少し滑らかに沈みます。動きを抑えたい場合は prefers-reduced-motion メディアクエリで transform を無効化し、色変化だけにする対応も検討できます。