css中 点击按钮变色 实例

CSS中的按钮样式调整是网页设计中经常遇到的问题之一，其中点击按钮变色是最基础的例子之一，下面是一个简单的实例：

<button class="btn">点击这个按钮，背景色将会变为红色</button>

<style>
.btn {
  background-color: #4CAF50; /* 初始的背景色 */
  border: none; /* 去掉边框 */
  color: white; /* 字体颜色 */
  padding: 15px 32px;
  text-align: center;
  text-decoration: none; /* 去除下划线 */
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:focus {
  background-color: #f44336; /* 按钮获得焦点时变为红色 */
}
</style> 

在这个例子中，我们首先定义了一个class为“btn”的按钮样式，包括背景色、边框、字体颜色、内边距以及鼠标悬浮时的效果等。然后定义了伪类“:focus”，表示按钮获得焦点时的样式，其中我们把背景色改为红色。

需要注意的是，这里的“:focus”是一个伪类选择器，表示当用户点击按钮后，按钮获得焦点时应用的样式，而不是点击后就一直保持的效果。如果需要按钮在点击后一直保持红色背景，应该使用JavaScript来实现。

除了使用伪类“:focus”外，我们还可以使用伪类“:active”来表示按钮被点击时的样式，也可以使用JavaScript来实现更多复杂的交互效果。希望本文对大家了解CSS中如何实现点击按钮变色有所帮助。