在CSS3中，为按钮添加悬停状态可以通过使用:hover伪类来实现。以下是一个简单的示例，展示了如何设计一个具有悬停状态的按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Button Hover Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>
/* 基础按钮样式 */
.btn {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 悬停状态样式 */
.btn:hover {
background-color: #0056b3;
}
基础按钮样式 (btn 类):
padding: 设置按钮的内边距。font-size: 设置按钮的字体大小。color: 设置按钮的文本颜色。background-color: 设置按钮的背景颜色。border: 设置按钮的边框。border-radius: 设置按钮的圆角半径。cursor: 设置鼠标悬停在按钮上时的光标样式。transition: 设置背景颜色的过渡效果，使颜色变化更加平滑。悬停状态样式 (btn:hover):
background-color: 当鼠标悬停在按钮上时，背景颜色会变为深蓝色 (#0056b3)。通过这种方式，你可以轻松地创建具有悬停效果的按钮，提升用户体验。你可以根据需要进一步自定义按钮的样式，例如添加阴影、渐变效果等。
