CSSには擬似クラスというものがあります。

今回は擬似クラスの1つactiveについて説明します。

説明

擬似要素activeは要素がアクティブな状態の事を指します。

アクティブな状態とは

PCなどではマウスのボタンで要素を押下し続けた状態の事を指します。
スマホの場合、要素を指で押下し続けた状態の事を指します。

例

ボタンを押下すると浮いていたボタンが沈むようなギミックを作成します。

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  box-shadow: 0 5px;
}

.box:active {
  box-shadow: none;
  position: relative;
  top: 5px;
}

最後に

activeについて使い道が分かりませんでしたが、分かりました。