1:ホバーで色が変わるボタンを作成する
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<button class="btn">Button</button>
</div>
</body>
</html>CSS
#container {
text-align: center;
}
.btn {
background-color: white;
color: black; border: 1px solid black;
padding: 10px 40px 10px 40px;
font-weight: 600; cursor: pointer;
margin: 50px 0;
transition: color 0.3s ease 1s,
background-color 0.3s ease 2s; } .btn:hover {
background-color: black;
color: white;
}※ポイント
transition: color 0.3s ease 1s, background-color 0.3s ease 2s;
ここでアニメーションの指定をしている
2:ホバーで影ができるボタンを作成する
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<divid="container">
<buttonclass="btn float">Button</button>
</div>
</body>
</html>SCSSの記述
$cWhite: white;
$cBlack: black;
#container {
text-align: center;
}
.btn {
background-color: $cWhite;
color: $cBlack;
border: 1pxsolid$cBlack;
padding: 10px40px;
margin: 50px0;
font-weight: 600;
cursor: pointer;
transition: all0.3s;
&.float {
&:hover {
box-shadow: 5px5px10px0pxrgba(0, 0, 0, 0.5);
}
}
}※ポイント
htmlの部分
<buttonclass="btn float">Button</button>SCSSの部分
&.float {
&:hover {
box-shadow: 5px5px10px0px rgba(0, 0, 0, 0.5);
}