禁止button点击后变色

要禁止按钮点击后变色，你可以使用CSS的`:disabled`伪类来实现。首先，给按钮添加一个类或者ID作为选择器，然后在CSS中定义该选择器的样式，包括禁用样式和启用样式。你可以使用`background-color`属性来设置按钮的背景颜色。

这是一个示例代码：

HTML:

<button class="disable-button">按钮</button>

CSS:

.disable-button:disabled {
  background-color: #ccc; /* 设置禁用时的背景颜色 */
}

通过将按钮的`disabled`属性设置为`true`或者使用JavaScript来动态地添加或移除`disabled`属性，就可以控制按钮是否可以点击，并且禁用时背景颜色会变为灰色。

相关问题

el-button点击后变色

el-button 点击后变色的实现，可以通过添加样式来完成。在默认状态下，按钮的背景色和字体颜色是通过CSS属性来定义的。当点击按钮后，可以通过修改按钮的背景色和字体颜色，来实现点击后变色的效果。以下是一个示例代码：

<template>
  <div>
    <el-button @click="handleClick" :style="{ backgroundColor: btnBgColor, color: btnFontColor }">{{ btnText }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnText: 'Click me',
      btnBgColor: '#409EFF',
      btnFontColor: '#fff'
    };
  },
  methods: {
    handleClick() {
      this.btnBgColor = '#67C23A';
      this.btnFontColor = '#000';
    }
  }
};
</script>

<style scoped>
.el-button {
  transition: all 0.3s ease-in-out;
}
</style>

以上代码实现了一个简单的 el-button 点击后变色的效果。在默认状态下，按钮的背景色是 #409EFF，字体颜色是 #fff。当点击按钮后，按钮的背景色会变成 #67C23A，字体颜色会变成 #000。这里使用了 transition 属性来实现平滑的过渡效果。

微信小程序button点击后变色

在微信小程序中，可以使用`bindtap`属性来监听按钮的点击事件，并在事件处理函数中修改按钮的样式以实现点击后变色的效果。

首先，在wxml文件中定义一个按钮，并为其绑定一个点击事件：

<button bindtap="changeColor" class="my-button">按钮</button>

然后，在对应的js文件中编写事件处理函数，通过修改按钮的样式来改变其颜色：

Page({
  data: {
    buttonColor: '#ffffff' // 设置按钮初始颜色
  },

  changeColor: function () {
    this.setData({
      buttonColor: '#ff0000' // 设置按钮点击后的颜色
    });
  }
});

最后，在对应的wxss文件中定义按钮的样式，使用data中的buttonColor作为背景颜色：

.my-button {
  background-color: {{buttonColor}};
  /* 其他样式属性 */
}

这样，当按钮被点击时，按钮的背景颜色会变为`#ff0000`。你可以根据需求自行修改按钮的样式和颜色。