悬停效果

Coddy CSS 项目：炫酷按钮课程的第 7 课，共 8 课。

让我们在按钮被悬停时添加一些效果吧！

要在按钮被悬停时更改它，我们可以使用 :hover 伪类，

.fancyButton:hover {
	background-color: red;
}

在上面的示例中，鼠标悬停在按钮上时，按钮会变成红色！

要让过渡效果更平滑，可以使用：

.fancyButton {
	...
	transition: all 0.2s;
}

你可以调整过渡时间（0.2s）。

挑战

简单

给按钮添加悬停效果，让它更好看！

必做任务：

悬停时可选且建议修改的属性：

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
    </body>
</html>

CSS 项目：炫酷按钮中的所有课

1简介

2CSS 项目

悬停效果