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;
ここでアニメーションの指定をしている