マウスオーバーでボタンの背景色を変化させるのに欠かせないのは手軽に使えるtransitionです。背景色の変化で文字が消えないよう z-index で階層を指定しています。

つい忘れがちですが、z-index は要素にposition（static以外）を設定しておかないとその効力が発揮できません。そのため常にpositionと抱き合わせで指定する必要があります。

See the Pen Hover Effect – Button ① by Basilico (@Basilico) on CodePen.

Button-3 の背景色を変えているのは、::beforeと::afterで準備した疑似要素のボーダー線です。::beforeにborder-bottomを、::afterにborder-topを持たせ、ボタンを隠せるほどの太さにします。そこに同様に太幅のborder-rightとborder-leftをtransparentにしてそれぞれ重ね、斜線を作り出しています。transparentはカラーを透明にさせるので、重ねることで他で指定したカラーの打ち消しなどに利用できます。

Button-5 は、疑似要素をボタンより一回り大きくして四つ角に丸みを持たせ、bodyの背景色と同色にしてボタンの上に被せています。それをtransformで回転させつつ上に移動させ、つかみどころのない背景色の変化を出しています。