<head> <link rel="stylesheet" href="style.css"> </head>在style.css文件中，我们可以定义按钮的默认状态样式（默认情况下不悬停在按钮上的样式），和按钮悬停状态样式。定义默认状态时，可以使用以下代码：
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
}
这里使用了button标签来定义按钮样式，设置了按钮内边距、背景颜色、字体颜色以及边框。
定义悬停状态时，可以使用以下代码：
button:hover {
background-color: #f00;
font-weight: bold;
}
在这里使用:hover选择器，表示当鼠标悬停在按钮上时，应用后面的样式。我们可以将悬停状态背景颜色设置为红色，字体加粗。
下面是一个完整的HTML代码示例，包含按钮的默认样式和悬停状态样式：
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <button>Click Me!</button> </body> </html>使用以上代码，我们可以在浏览器中看到一个样式为黑色背景、白色字体的按钮。当我们鼠标悬停在按钮上方时，按钮会变成红色背景及加粗的字体，提供了更好的用户体验。 总之，通过使用CSS样式表，我们可以实现按钮的悬停效果，从而优化我们的网页设计。希望这篇文章对你有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
