【CSS】押し込まれるような立体的なボタンを作る

2023年6月29日

CSSのbox-shadowプロパティやactive擬似クラスを使って、クリックしたときに実際にボタンが押されているような、立体感のあるボタンの作り方を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！

実装方法その1：クリック時にボタン上部にスペースを作る

ボタンをクリックしたとき、『ボタン上部に空白を作る』＆『ボタン下側の影を小さくする』ことで、あたかもボタンが押されて凹んでいるようなスタイルを設定できます。

なお、ボタンの影は「ボタンのメインカラーを暗めにした色」にするとそれっぽくなります。
コードは以下よりコピーしてみてください。

HTMLコード

<div class="btn-box">
  <button class="btn-red">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-blue">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-green">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-yellow">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-lightBlue">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-white">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-gray">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-black">Click!</button>
</div>

CSSコード

ボタンをクリックしたときは「:active」疑似要素を使い、margin-topとbox-shadowプロパティを設定することで、ボタンが押されているようなスタイルを設定できます。

.btn-box {
  width: 80%;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}

.btn-box button {
  padding: 8px;
  border: none;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
}

/* ボタンをマウスホバーしたとき、ボタンを薄くする */
.btn-box button:hover {
  opacity: .7;
}

/* ボタンをクリックしたとき、ボタン上部に余白を作る */
.btn-box button:active {
  margin-top: 0.2em;
}

/* 赤ボタンのスタイル */
.btn-box button.btn-red {
  color: #fff;
  background-color:#ff0000;
  box-shadow: 0 0.3em 0 #c00000;
}

.btn-box button.btn-red:active {
  box-shadow: 0 0.1em 0 #c00000;
}

/* 青ボタンのスタイル */
.btn-box button.btn-blue {
  color: #fff;
  background-color:#0000ff;
  box-shadow: 0 0.3em 0 #0000c0;
}

.btn-box button.btn-blue:active {
  box-shadow: 0 0.1em 0 #0000c0;
}

/* 緑ボタンのスタイル */
.btn-box button.btn-green {
  color: #fff;
  background-color:#00ff00;
  box-shadow: 0 0.3em 0 #00c000;
}

.btn-box button.btn-green:active {
  box-shadow: 0 0.1em 0 #00c000;
}

/* 黄ボタンのスタイル */
.btn-box button.btn-yellow {
  color: #000000;
  background-color:#ffff00;
  box-shadow: 0 0.3em 0 #c0c000;
}

.btn-box button.btn-yellow:active {
  box-shadow: 0 0.1em 0 #c0c000;
}

/* 水色ボタンのスタイル */
.btn-box button.btn-lightBlue {
  color: #000000;
  background-color:#00ffff;
  box-shadow: 0 0.3em 0 #008080;
}

.btn-box button.btn-lightBlue:active {
  box-shadow: 0 0.1em 0 #008080;
}

/* 白ボタンのスタイル */
.btn-box button.btn-white {
  color: #000000;
  background-color:#ffffff;
  box-shadow: 0 0.3em 0 #c0c0c0;
  border: .2px solid #c0c0c0;
}

.btn-box button.btn-white:active {
  box-shadow: 0 0.1em 0 #c0c0c0;
}

/* グレーボタンのスタイル */
.btn-box button.btn-gray {
  color: #ffffff;
  background-color:#808080;
  box-shadow: 0 0.3em 0 #404040;
}

.btn-box button.btn-gray:active {
  box-shadow: 0 0.1em 0 #404040;
}

/* 黒ボタンのスタイル */
.btn-box button.btn-black {
  color: #ffffff;
  background-color:#000000;
  box-shadow: 0 0.3em 0 #000000;
  border: .2px solid #808080;
}

.btn-box button.btn-black:active {
  box-shadow: 0 0.1em 0 #000000;
}

実装方法その2：クリック時にボタン要素を下に移動

実装方法その1では、ボタン上部にマージンを作ることで無理矢理ボタンの位置を下げ、クリックしたように見せていました。が、レイアウトによっては他の要素もいっしょに下がってしまうといった問題が起きる可能性があります。

その場合、『ボタン要素自体を下に移動』＆『ボタンの影を移動した分だけ小さくする』という方法を試してみてください。

コードは以下よりコピーしてみてください。

HTMLコード（実装方法その1と同じ）

<div class="btn-box">
  <button class="btn-red">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-blue">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-green">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-yellow">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-lightBlue">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-white">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-gray">Click!</button>
</div>
<div class="btn-box">
  <button class="btn-black">Click!</button>
</div>

CSSコード（:active要素のみ変更）

ボタンをクリックしたとき（:active）、『box-shadowを小さくする』＆『小さくした分だけtransform: translateY();で要素を下方向に移動させる』ことで、ボタンが押されているようなスタイルを設定できます。

.btn-box {
  width: 80%;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}

.btn-box button {
  padding: 8px;
  border: none;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
}

/* ボタンをマウスホバーしたとき、ボタンを薄くする */
.btn-box button:hover {
  opacity: .7;
}

/* ボタンをクリックしたとき、ボタンを下に移動する */
.btn-box button:active {
  transform: translateY(0.2em);
}

/* 赤ボタンのスタイル */
.btn-box button.btn-red {
  color: #fff;
  background-color:#ff0000;
  box-shadow: 0 0.3em 0 #c00000;
}

.btn-box button.btn-red:active {
  box-shadow: 0 0.1em 0 #c00000;
}

/* 青ボタンのスタイル */
.btn-box button.btn-blue {
  color: #fff;
  background-color:#0000ff;
  box-shadow: 0 0.3em 0 #0000c0;
}

.btn-box button.btn-blue:active {
  box-shadow: 0 0.1em 0 #0000c0;
}

/* 緑ボタンのスタイル */
.btn-box button.btn-green {
  color: #fff;
  background-color:#00ff00;
  box-shadow: 0 0.3em 0 #00c000;
}

.btn-box button.btn-green:active {
  box-shadow: 0 0.1em 0 #00c000;
}

/* 黄ボタンのスタイル */
.btn-box button.btn-yellow {
  color: #000000;
  background-color:#ffff00;
  box-shadow: 0 0.3em 0 #c0c000;
}

.btn-box button.btn-yellow:active {
  box-shadow: 0 0.1em 0 #c0c000;
}

/* 水色ボタンのスタイル */
.btn-box button.btn-lightBlue {
  color: #000000;
  background-color:#00ffff;
  box-shadow: 0 0.3em 0 #008080;
}

.btn-box button.btn-lightBlue:active {
  box-shadow: 0 0.1em 0 #008080;
}

/* 白ボタンのスタイル */
.btn-box button.btn-white {
  color: #000000;
  background-color:#ffffff;
  box-shadow: 0 0.3em 0 #c0c0c0;
  border: .2px solid #c0c0c0;
}

.btn-box button.btn-white:active {
  box-shadow: 0 0.1em 0 #c0c0c0;
}

/* グレーボタンのスタイル */
.btn-box button.btn-gray {
  color: #ffffff;
  background-color:#808080;
  box-shadow: 0 0.3em 0 #404040;
}

.btn-box button.btn-gray:active {
  box-shadow: 0 0.1em 0 #404040;
}

/* 黒ボタンのスタイル */
.btn-box button.btn-black {
  color: #ffffff;
  background-color:#000000;
  box-shadow: 0 0.3em 0 #000000;
  border: .2px solid #808080;
}

.btn-box button.btn-black:active {
  box-shadow: 0 0.1em 0 #000000;
}

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！