css中按钮点击有背景颜色怎么设置

在CSS中，我们可以很方便地为按钮添加“点击时有背景颜色”的效果。只需要为按钮指定:hover和:active伪类即可。
使用:hover伪类，可以在鼠标悬停在按钮上时改变按钮的样式。将:hover伪类应用于按钮，可以让按钮在鼠标悬停时显示出不同的效果。例如，可以改变按钮的背景颜色、文本颜色、边框样式等。
使用:active伪类，可以在按钮被点击时改变按钮的样式。将:active伪类应用于按钮，可以让按钮在被点击时显示出不同的效果。例如，可以改变按钮的背景颜色、阴影效果等。
下面是一段典型的CSS代码，可以为按钮添加:hover和:active伪类。我们可以将其复制到

标签中，然后将按钮的class属性设置为btn，就可以实现按钮的点击有背景颜色的效果。

<pre>
.btn {
    display: inline-block;
    padding: 5px 15px;
    background-color: #3498db;
    color: #fff;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btn:hover {
    background-color: #2980b9;
}

.btn:active {
    background-color: #1abc9c;
} 

在上述代码中，.btn是我们为按钮定义的样式名称，包含了按钮的大小、颜色、字体以及其他相关的样式属性。.btn:hover和.btn:active是为按钮添加的伪类样式，分别控制了按钮在鼠标悬停时和被点击时的效果。其中，.btn:hover将按钮的背景颜色改为更深的蓝色，.btn:active则将按钮的背景颜色改为绿色。
通过这种方法，我们可以很容易地为按钮添加“点击时有背景颜色”的效果，使得用户更容易地理解和使用我们的网站或应用。