3D 立体プッシュボタン
box-shadow と transform で実装する 3D 押下感ボタン。クリックでボタンが「沈む」演出により、リアルな操作感を提供。CSS のみ・3 色バリアント付き。
解説
3D 立体プッシュボタンは、UI コンポーネントカテゴリの「ボタン」に分類される実装パターンです。CSS のみで構成され、難易度はシンプルレベル。
下方向に厚みを持たせた立体ボタン。クリックで沈み込むフィジカルな感触。
立体感のあるボタンと押下時の「沈み込み」を、box-shadow + :active 擬似クラスだけで実装するパターンです。Stripe や Notion 風のソリッドな UI に合います。
3 色（青 / 緑 / 赤）のバリアントを CSS 変数で切り替え可能で、コピペしてすぐ自分のサイトで使えます。アクセシビリティ的にも :focus-visible を残してあるのでキーボード操作 OK。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
影色は背景色より少し暗い色（HSL で 10〜20% 落とした色）を使うと自然です。ブランドカラーが決まっている場合は CSS 変数で一括管理を推奨。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ホバー時の挙動も追加したい
.b3p:hover { transform: translateY(-2px); box-shadow: 0 7px 0 ... } のように、ホバーで少し浮かせると質感が増します。このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
Tailwind CSS でも実装できますか？
可能です。クラスベースのスタイルを Tailwind のユーティリティクラスに置き換えれば同じ動作になります。アニメーション・疑似要素については
@apply や arbitrary values が必要な場合があります。Web アクセシビリティ的に問題ありませんか？
<button> タグを使用しているため、キーボード Tab フォーカス・Enter / Space キー操作・スクリーンリーダー読み上げに対応します。フォーカスリングは visible のままにしておくことをおすすめします。