へこむボタンを作ろう！
１．立体的なボタンを作る
まず、立体的なボタンを作ります。これは、ボタンに陰をつけるだけなので簡単に作ることが出来ます。
陰は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;
}
これで完成です！
