へこむボタンを作ろう！

１．立体的なボタンを作る

まず、立体的なボタンを作ります。これは、ボタンに陰をつけるだけなので簡単に作ることが出来ます。
陰はcssにbox-shadowを書いてつけます。

ex)box-shadow: 0px 8px #434242;

セレクタにactiveを用いることで要素がクリックされている間だけcssを適用することが出来ます。
なのでボタンのセレクタにactiveをつけて、そこにbox-shadowを打ち消すためにbox-shadow: none;を書きます。

ex)
button:active {
box-shadow: none;
}

最後にクリックしている間、ボタンをへこませます。なので、2と同じようにactiveをつけたセレクタの中にプログラムを書きます。
今回はposition: relative;を使います。これはtopやleftと併用すると要素を本来の位置からずらすことが出来ます。

ex)
button:active {
box-shadow: none;
position: relative;
top: 8px;
}

これで完成です！