[初心者] ボタンに影を付けましょう![: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 float">Button</button>
</div>
</body>
div#container>.btn.floatを打てば、一瞬で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.float:hover {
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
＊ポイントだけ簡単に紹介しま〜す
.btn { 略 }
ボタンにカーソルがあたっていない時の飾り付けを決めています。
cursor: pointer;
ボタンにカーソルが当たった時だけ、ミッキーさんの手のひらマーク
になります。
transition: all 0.3s;
0.3秒かけて.btn{ }の飾り付けから、.btn:hover { }の飾り付けに変わっていきます。
.btn:hover { 略 }
ボタンにカーソルがあたった時の飾り付けを決めています。
Finished.
Simple is the best
