DEMO
CODE
<div class="demo-stage b3d-stage"><button class="b3d-btn" type="button">PRESS ME</button></div>
.b3d-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.b3d-btn { border:none; cursor:pointer; padding:1rem 2.2rem; border-radius:12px; background:#E91B89; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.95rem; box-shadow:0 7px 0 #a01060; transition:transform .08s ease, box-shadow .08s ease; }
.b3d-btn:hover { filter:brightness(1.05); }
.b3d-btn:active { transform:translateY(5px); box-shadow:0 2px 0 #a01060; }
AI PROMPT
押すと沈み込む立体ボタンをCSSだけで作って。box-shadow:0 7px 0 <暗い色> でボタン下に厚みを作り、:active で transform:translateY(5px) + box-shadow:0 2px 0 <暗い色> にして沈む。transition は .08s と短くしてカチッとした押下感に。ゲーム・モバイル風UIのボタンに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
押すと沈み込む立体ボタン。box-shadowの厚みとactiveのtranslateで物理的な押下感を再現。ゲーム・モバイル風UIに。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。