ボタンを押したことが伝わるCSS
a要素やbutton要素のボタンのCSSは、最近よくこんな感じにします。
:active属性でボタンを押下した状態のスタイルを指定できますが、1px下に動かすだけでもユーザーに「ボタンを押した」ことが伝わります。
See the Pen
button:active by Yu Watanabe (@yuw27b)
on CodePen.
margin-topまたはmargin-bottomでも下に1px動かすことはできますが、もともとのマージンや、隣接・親要素のマージンとの相殺が起こっている場合もあるので、それらに影響のないtransformを使っています。
特に装飾に指定がない場合は、この「とりあえず1px動かしておくCSS」を入れています。