【CSS】コピペOK！hoverしたらへこむボタンのシンプルな作り方

hoverしたらへこむボタンの作り方です。box-shadowで影を作り、bottomで位置をずらすことで凹むように見せます。

hoverしたらへこむボタンのサンプル

コピペはこちらから

<div class="btn"><a href="#">button</a></div>

.btn {
  width: 200px;
}
.btn a {
  position: relative;
  top: 0;
  display: block;
  padding: 26px 0;
  background-color: #8f1c23;
  box-shadow: 0 9px #4C0F13;
  border-radius: 5px;
  font-size: 22px;
  color: #d3af71;
  text-align: center;
  text-decoration: none;
  transition: .2s ease-in-out;
}
.btn a:hover {
  top: 9px; /* 元の位置から9px分下げる */
  box-shadow: 0 0 #4C0F13; /* 影を0pxにする */
}

【ざっくり解説】へこむように見える仕組み

box-shadowで影を作る

まずはbox-shadowで下方向のぼかし無しの影を加えることで、立体的に見せます。影の色はボタンの色と同系統の暗めの色にするのがポイント。

.btn a {
  background-color: #8f1c23;
  box-shadow: 0 9px #4C0F13;
}

ホバー時に影をなくす

そしてホバー時に影をなくします。が、それだけだとこんな風になってボタンはへこんでくれません。

.btn a:hover {
  box-shadow: 0 0 #4C0F13; /* 影を0pxにする */
}

bottomを使ってボタンの位置を調整

へこんだように見せるにはホバー時に影をなくすだけでなくボタン全体の位置を下げる必要があります。そこでpositionを使ってホバー時に「top: 9px」を追加。これでホバー時に「影がなくなる」+「影の高さ分ボタン位置が下がる」ので、へこむボタンの完成です。

.btn a {
  position: relative;
  top: 0;
}
.btn a:hover {
  top: 9px; /* 元の位置から9px分下がる */
  box-shadow: 0 0 #4C0F13; /* 影を0pxにする */
}

ちなみにホバー時のスタイルを「box-shadow: none」にするとホバーアニメーションの2秒の間に影が薄く消えていってしまうため、あくまで影自体は消さずに影の高さを0pxにする、という風にしています。

まとめ

立体的なボタンに触れたときにスッと凹んでくれると独特の気持ちよさがあります。transitionの秒数や動きを変えることで「押した感」が変わるのでいろいろ試すのも楽しいです。