3D 立体シャドウボタン（押すと凹む）
ボタンの真下に厚い box-shadow を敷いて、立体的な「ブロック」のように見せたボタンです。影に 0 6px 0 のようにぼかし 0 の濃い影を使うことで、面に厚みがあるソリッドな立体感が生まれます。
解説
ボタンの真下に厚い box-shadow を敷いて、立体的な「ブロック」のように見せたボタンです。影に 0 6px 0 のようにぼかし 0 の濃い影を使うことで、面に厚みがあるソリッドな立体感が生まれます。:hover で少し浮き上がり、:active では translateY(4px) でボタン本体を沈め、同時に下の影を薄くすることで、実際に押し込んだような物理的フィードバックを再現しています。
映える場面
- ゲームやキッズ向けサイトの楽しげな操作ボタン
- 「今すぐプレイ」「スタート」など勢いを出したい CTA
- ポップでカジュアルなトーンのキャンペーン LP
色を変えるときは、ボタン本体の background と、影に使っている少し暗い同系色（このサンプルでは #c0394d）をセットで差し替えると立体感が保てます。厚みは影の 6px の値で調整できます。注意点として、押し込み量と影の変化は transition で表現しているので、動きを抑えたいユーザー向けに prefers-reduced-motion を考慮すると安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ボタンの厚み（高さ）を変えられますか
はい。box-shadow の 0 6px 0 の 6px を大きくすると影が厚くなり高さが増します。あわせて :active の沈み込み translateY の値も調整すると、押した感触が自然になります。
色を変えると立体感が崩れませんか
本体の background と、影に使っている一段暗い同系色をセットで変えれば崩れません。影だけ元の色のまま残すと不自然になるので、両方を揃えて差し替えてください。