CSS实现点击按钮时更换颜色

你可以使用CSS中的伪类选择器`:hover`来实现鼠标悬浮在按钮上时更换颜色的效果，也可以使用`:active`来实现点击按钮时更换颜色的效果。具体的实现方式如下所示：

button:hover {
  background-color: red;
}

button:active {
  background-color: blue;
}

当用户将鼠标悬浮在按钮上时，按钮的背景颜色将会变成红色；当用户点击按钮时，按钮的背景颜色将会变成蓝色。你可以将`background-color`换成其他的CSS样式属性，以实现不同的效果。

相关问题

CSS实现点击按钮后更换颜色

你可以使用CSS中的伪类选择器`:active`来实现点击按钮后更换颜色的效果。具体的实现方式如下所示：

button:active {
  background-color: red;
}

当用户点击按钮时，按钮的背景颜色将会变成红色。你可以将`background-color`换成其他的CSS样式属性，以实现不同的效果。

实现微信小程序功能点击按钮更换背景颜色

要实现微信小程序的按钮点击更换背景颜色功能，可以按照以下步骤操作：

1. 在 wxml 文件中添加一个按钮元素，并设置其绑定事件，如下所示：

<button bindtap="changeColor">点击更换背景颜色</button>

2. 在 js 文件中编写事件处理函数 changeColor，可以使用 setData 方法来改变页面的背景颜色，如下所示：

Page({
  data: {
    backgroundColor: '#fff' // 初始背景颜色
  },
  changeColor: function() {
    const colors = ['#ff0000', '#00ff00', '#0000ff']; // 可选的背景颜色数组
    const index = Math.floor(Math.random() * colors.length); // 随机选取一个颜色
    const color = colors[index];
    this.setData({
      backgroundColor: color
    });
  }
});

3. 在 wxss 文件中设置页面的背景颜色，可以使用动态绑定的方式，如下所示：

page {
  background-color: {{ backgroundColor }};
}

这样，当用户点击按钮时，就会触发 changeColor 事件处理函数，随机更换页面的背景颜色。