ボタンをへこませる - CSS

ボタンを押したときにへこんだように見せることがCSSで実現可能
ポイントは以下の3つだけ

1. box-shadowで影をつける
2. 押下時に、box-shadowを消す
3. 押下時に、影の分だけ表示位置を下にずらす

これだけでへこんでいるように見える！！

See the Pen ボタンを押したらへこませる by tamago (@tamago324) on CodePen.

コードの説明

重要な部分だけ説明

1.box-shadowで影をつける

.btn {
    box-shadow: 0 6px #a2a2a2;
}

通常時は影を表示させる

2. 押下時にbox-shadowを消す

.btn:active {
    box-shadow: none;
}

「押下時」にスタイルを適用するには:activeという擬似クラスを使う
box-shadowプロパティにnoneを指定することでスタイルを無効化することができる

3. 押下時に表示位置を下にずらす

.btn:active {
    position: relative;
    top: 6px;
}

positionプロパティにrelativeを指定することによって、その要素自体の表示位置が変更可能になる
top: 6px;で、.btnの左上を起点として、6px分だけ下に表示している

参考文献

Progate