【CSS】ボタンやリンクをクリックしている時に色変化などさせる方法

ボタンやリンクにホバーした時だけでなく、クリックしている時も背景色や文字の色などを変化させる方法をご紹介します。

結論としては:activeという擬似クラスを使います。

ボタンやリンクをクリックしている時に色変化などさせる方法

まずは例をご覧下さい。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

実際にクリックしてもらうと分かると思いますが、クリックしている時に色変化を起こしています。

よくホバーしている時の色変化と勘違いしがちなのですが、クリックしている時の色変化は:activeを使うようにします。

以上ご参考になれば幸いです。