立体的なボタン デザイン見本
CSS の box-shadow と :active 擬似クラスを組み合わせ、クリック時にボタンが押し込まれる立体感を表現する実装デモ。コピーしてすぐに使えるコードを掲載。
transform: translateY() — 押し込まれる立体ボタン
HTML
<div class="btn-wrap">
<button class="btn-3d btn-red">Click!</button>
<button class="btn-3d btn-blue">Click!</button>
<button class="btn-3d btn-green">Click!</button>
<button class="btn-3d btn-yellow">Click!</button>
<button class="btn-3d btn-cyan">Click!</button>
<button class="btn-3d btn-orange">Click!</button>
<button class="btn-3d btn-purple">Click!</button>
<button class="btn-3d btn-pink">Click!</button>
<button class="btn-3d btn-indigo">Click!</button>
<button class="btn-3d btn-white">Click!</button>
<button class="btn-3d btn-gray">Click!</button>
<button class="btn-3d btn-dark">Click!</button>
</div>CSS
.btn-wrap {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 20px;
}
.btn-3d {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.btn-3d:hover {
opacity: 0.75;
}
.btn-3d:active {
transform: translateY(0.2em);
}
.btn-red { color: #fff; background-color: #e74c3c; box-shadow: 0 0.3em 0 #c0392b; }
.btn-red:active { box-shadow: 0 0.1em 0 #c0392b; }
.btn-blue { color: #fff; background-color: #3498db; box-shadow: 0 0.3em 0 #2980b9; }
.btn-blue:active { box-shadow: 0 0.1em 0 #2980b9; }
.btn-green { color: #fff; background-color: #2ecc71; box-shadow: 0 0.3em 0 #27ae60; }
.btn-green:active { box-shadow: 0 0.1em 0 #27ae60; }
.btn-yellow { color: #333; background-color: #f1c40f; box-shadow: 0 0.3em 0 #f39c12; }
.btn-yellow:active { box-shadow: 0 0.1em 0 #f39c12; }
.btn-cyan { color: #fff; background-color: #1abc9c; box-shadow: 0 0.3em 0 #16a085; }
.btn-cyan:active { box-shadow: 0 0.1em 0 #16a085; }
.btn-orange { color: #fff; background-color: #e67e22; box-shadow: 0 0.3em 0 #ca6f1e; }
.btn-orange:active { box-shadow: 0 0.1em 0 #ca6f1e; }
.btn-purple { color: #fff; background-color: #8e44ad; box-shadow: 0 0.3em 0 #6c3483; }
.btn-purple:active { box-shadow: 0 0.1em 0 #6c3483; }
.btn-pink { color: #fff; background-color: #e91e8c; box-shadow: 0 0.3em 0 #b5166d; }
.btn-pink:active { box-shadow: 0 0.1em 0 #b5166d; }
.btn-indigo { color: #fff; background-color: #3f51b5; box-shadow: 0 0.3em 0 #303f9f; }
.btn-indigo:active { box-shadow: 0 0.1em 0 #303f9f; }
.btn-white { color: #333; background-color: #ecf0f1; box-shadow: 0 0.3em 0 #bdc3c7; border: 1px solid #ddd; }
.btn-white:active { box-shadow: 0 0.1em 0 #bdc3c7; }
.btn-gray { color: #fff; background-color: #95a5a6; box-shadow: 0 0.3em 0 #7f8c8d; }
.btn-gray:active { box-shadow: 0 0.1em 0 #7f8c8d; }
.btn-dark { color: #fff; background-color: #2c3e50; box-shadow: 0 0.3em 0 #1a252f; border: 1px solid #4a4a4a; }
.btn-dark:active { box-shadow: 0 0.1em 0 #1a252f; }
:active + transform: translateY()
クリック時（:active）に transform: translateY() でボタンを下方向に移動し、同時に box-shadow を小さくすることで押し込まれた立体感が生まれます。影の色はメインカラーより暗めにするとリアルな仕上がりになります。なお margin-top でも同じ見た目を作れますが、margin-top は周囲のレイアウトにも影響するため、transform: translateY() を使う方が安全です。
関連記事
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…