css点击换按钮颜色

CSS中，点击换按钮颜色是一种十分常见的效果。这种效果利用了CSS中:hover和:active这两种状态来完成，非常方便实现。下面我们来看看具体代码。

/*定义按钮*/
.button {
  width: 80px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.3s;
}
/*鼠标滑过按钮*/
.button:hover {
  background-color: #2980b9;
}
/*按下按钮*/
.button:active {
  background-color: #1abc9c;
}
 

以上代码中，我们首先定义了一个按钮的样式，包括宽度、高度、字体大小、颜色、边框和鼠标指针。接着，在:hover和:active两个状态下，改变按钮的背景颜色，实现按钮的点击换色效果。

这种CSS点击换色按钮效果实现简单，且不需要使用脚本，比较适用于网站的一些小功能模块，可以提高页面的用户体验和交互性。希望本文对大家有所帮助。