【HTML/CSS】「:hover」で、カーソルを合わせたアイコンを変化させる！

※この記事は、プログラミング学習サイト「Progate」の学習内容に関するものです。

「HTML&CSS 学習レッスン 中級編」の学習中に、
とっても小さなことながら感動したことがあったので、書き残してみます。

◎「トップ部分を作ろう / 6.レイアウトを整えよう」
　・カーソルが乗った状態をhoverという
　・CSSにて、クラスやタブのセレクタに疑似クラス「:hover」を書き加えたものを
　　用意すると、カーソルを乗せたときだけ{ } 内に設定した内容が適用され、見た
　　目が変化する

【記入例】

HTML

<div class="btn">新規登録はこちら</div>

カーソルを乗せていないとき用のCSS

.btn {
 width: 180px;
 padding: 8px 24px;
 text-align: center;
 color: white;
 background-color: #000077;
 opacity: 0.8;
}

↑カーソルを乗せていないとき、
・枠の幅は180pxで、空白は上下8pxずつ、左右24pxずつ
・文字の位置は中央寄せ、文字色は白、文字の不透明度は0.8（若干透過された白）
・背景は青

カーソルを乗せたとき用のCSS

.btn:hover {
 background-color: skyblue;
 opacity: 1;
}

↑カーソルを乗せたとき、
・文字の不透明度を1（透過されていない白）に変化
・背景を水色に変化

【見た目の変化】

学生時代、ホームページ作成のためHTMLを少しかじっていたのですが･･･
ただのHTMLではできることに限界があって、何度もモヤモヤしたものです。
いやぁ、CSSってすごい！可能性が無限大！ですね♪✨

P.S.
コーディングよりも記事を書く時間の方が圧倒的に長くなるの何とかしたい ||| orz |||