疑似クラスとはなんなんだ？？？？？？？？？？？
cssには、疑似クラスというのがあります。
普通のクラス名にコロン（:）をつけるだけで、難しそうなことが簡単にできます。
（コロン（:）を2つつける場合もあります。）
今回はその中でも一番簡単だと思った、[hover]という疑似クラスを紹介します。
コード
main.css
.test {
color: black; /* ボタンの文字をblackにする。*/
}
.test:hover {
background-color: blue; /* ボタンにマウスが触れたら、後ろの色を青に変える。*/
}
index.html
<input type="button" class="test" value="ボタンだよー"><!--ボタンを作る。-->
これでできました。
#確認
マウスが触っていないとき。
マウスが触っているとき。（マウスが見えないけど、ちゃんと当たっています。）
できたでしょうか？
他にもいろんなことができるので、ぜひ調べて使ってみてはどうでしょうか？＿
参考
後付け
上のcssコードではうまく動作しない可能性があります。
下のコードでは動くと思います。