マウスカーソルを当てた時にボタンの色を変える

CSSのスタイリングでボタンの色がカーソルが当たった時点で変化するスタイリングてよく見かけますよね。

今回はそれのやり方を教えます。
ぶっちゃけこれをコピペすれば誰でもできますよ＾＾

まずはHTMLの方ではClass属性をつけてあげましょう。
今回はbtnという名前をつけました＾＾

<div class="btn">OK</div>

次はCSS画面。
一回これをそのままコピーしてみて遊んでみてください。
習うより慣れろです笑
中身の構造がいじってみると確実にわかりますよ！！

.btn{
 width: 100px;
 background-color: blue;
 text-align: center;
 padding: 4px;
 color: white;
}
.btn:hover{
 background-color: violet;
 color: black;
 opacity: 0.8;
}

ぜひ試してみてください。
:hoverを使用すれば簡単にマウスカーソルを当てたときに
要素のスタイリングの変更ができちゃいます♪