今回は、クリックしたらボタンが凹むようにする実装を紹介したいと思います！

押せるようなボタンを作りたい人は是非参考にしてください。

【CSS】クリックしたらボタンが凹むようにする方法

完成形はこちら！

ボタンを押してみると、凹むのがわかるでしょう。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

コピペできるようになっているので、是非真似してコーディングしてみてください！

HTML

<a href="#" class="btn-square">Button</a>

クラスを含んだaタグを用意します。

CSS

.btn-square {
  display: inline-block;
  padding: 20px 40px;
  text-decoration: none;
  background-color: #333;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 10px;
}
.btn-square:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

◎1行目〜9行目

まずはaタグに幅を持たせるようにしたいので、「display: inline-block;」でインラインブロック要素に。

そして、「padding: 20px 40px;」で余白をつけます。

「text-decoration: none;」でaタグにデフォルトでつく下線を消します。

「background-color: #333;」と「color: #FFF;」でボタンに色をつけていきます。

「border-bottom: solid 4px #627295;」でボタンの影を作成。

最後に「border-radius: 10px;」で、ボタンに少し丸みをつけます。

◎10行目〜14行目

ボタンをクリックするとボタンが凹むようにしたいので、擬似クラスである「active」をつけます。

activeはボタンをクリックしてから離すまで指定したスタイルが適応されます。

activeの時に「transform: translateY(4px);」を指定して、「border-bottom: solid 4px #627295;」の4px分をボタンをクリックした際に消えるようにします。

最後に、「border-bottom: none;」を指定することで、ボタンを押したらborderが消えて凹むように見えますよ！

まとめ

以上が、クリックしたらボタンが凹むようにする実装でした。

簡単にできるので、是非参考にしてください！