要给按钮添加悬停效果,可以使用CSS3中的:hover伪类选择器。下面是一个示例代码,演示了如何为按钮添加悬停效果:
HTML代码:
CSS代码:
.hover-button {
background-color: #ccc;
border: none;
color: #000;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.3s;
cursor: pointer;
}
.hover-button:hover {
background-color: #555;
color: #fff;
}
在上面的代码中,我们使用了.hover-button类来定义按钮的样式。其中,transition-duration属性定义了悬停效果的过渡时间为0.3秒,并且cursor属性将鼠标悬停在按钮上时显示为指针形状。
使用:hover伪类选择器,我们将按钮的背景颜色和文字颜色在悬停时修改为不同的值,以实现悬停效果。
确保将上述代码添加到您的HTML文件中,您就可以为按钮添加悬停效果了。
下一篇:按钮上的样式未应用