[初心者]でもかっこいいボタンは作れるのよ![:santa:]( ":santa:")
（CSS）
（CSS）＊Image（カーソルをボタンに合わせると色が変化するボタンを作るよ）
とりあえず超シンプルHTMLを用意しましょっか![:writing_hand:]( ":writing_hand:")
[HTMLの中身です]
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<button class="btn">Button</button>
</div>
</body>
(VSCodeなら自動補完機能（div#content>button.btn）で一瞬で以下HTMLが作れるよ。)
CSSでボタンをカッコ良くしましょっか![:relaxed:]( ":relaxed:")
ボタンにカーソルを合わせると、
ボタンが0.3秒でホワイトからブラックに変わるようになりますよん。
[style.cssの中身です]
#content {
text-align: center;
}
.btn {
background-color: white;
color: black;
border: 2px solid black;
padding: 10px 40px;
margin: 150px 0;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background-color: black;
color: white;
}
＊ポイントだけ簡単に紹介しま〜す
.btn { 略 }
ボタンにカーソルがあたっていない時の飾り付けを決めています。
cursor: pointer;
ボタンにカーソルが当たった時だけ、ミッキーさんの手のひらマーク
になります。
transition: all 0.3s;
0.3秒かけて.btn{ }の飾り付けから、.btn:hover { }の飾り付けに変わっていきます。
.btn:hover { 略 }
ボタンにカーソルがあたった時の飾り付けを決めています。
Finished.
Simple is the best
