css 按钮按下 弹起 |css 边框渐变颜色

.btn {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
}
.btn:hover {
background-color: #2980b9;
}
.btn:active {
background-color: #1abc9c;
}

上述代码表示，大家创建了一个.btn类，使用了一些基本的CSS样式。当鼠标悬停在按钮上时，大家通过:hover伪类来改变背景颜色。当用户按下按钮时，大家通过:active伪类来改变按钮的背景颜色。

需要注意的是，当用户持续按住鼠标时，:active伪类会一直生效。因此，大家需要选择恰当的背景颜色，以避免用户视觉疲劳。此外，大家也可以使用JavaScript通过添加或删除类来控制按钮的状态。

CSS按钮的按下和弹起效果可以为用户提供更直观、更友好的交互体验。通过结合JavaScript等其他技术手段，大家可以进一步提升网站的用户体验。