今さら聞けないHTML　2022年11月30日

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

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

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

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

【記入例】
“`:HTML:

新規登録はこちら

“`
“`:カーソルを乗せていないとき用のCSS:
.btn {
width: 180px;
padding: 8px 24px;
text-align: center;
color: white;