el-button点击后文字颜色变化

您可以使用 `:active` 和 `:visited` 伪类来改变 `<el-button>` 元素的文本颜色。例如：

.el-button:active,
.el-button:visited {
  color: red;
}

这将使点击 `<el-button>` 元素后的文本颜色变为红色。您可以根据需要更改颜色值。

相关问题

el-button鼠标悬停颜色不变

### 解决 `el-button` 组件鼠标悬停时颜色不变化的问题

对于 `Element UI` 中的 `el-button` 组件，在某些情况下可能会遇到鼠标悬停时背景颜色或文字颜色未按预期改变的情况。这通常是因为样式优先级问题或是自定义样式覆盖了默认行为。

#### 方法一：通过 CSS 覆盖默认样式

可以通过增加特定的选择器来提高样式的优先级，从而确保自定义的颜色能够在悬停状态下生效：

/* 提高 .el-button:hover 的优先级 */
.el-button.custom-hover-class:hover {
    background-color: #409EFF !important; /* 自定义悬停背景色 */
    color: white !important;               /* 自定义悬停字体颜色 */
}

在 HTML 或模板文件中给按钮添加对应的类名：

<template>
  <el-button class="custom-hover-class">点击我</el-button>
</template>

这种方法简单直接，适用于只需要修改少量按钮场景下的解决方案[^1]。

#### 方法二：全局配置主题变量

如果项目中有大量类似的定制需求，则可以考虑调整 Element UI 主题中的 LESS 变量表。具体操作是在项目的入口处引入并重写这些预设值之前设置新的颜色参数：

// 修改 element-ui/lib/theme-chalk/index.css 文件前加入如下代码
@button-bg: #fff;
@button-active-bg: @primary-color;

@import "~element-ui/packages/theme-chalk/src/button";

此方法更为彻底，能够一次性影响整个应用内的所有按钮组件的行为，但需要注意的是这样做会影响到所有的同类型控件，因此要谨慎评估其适用范围。

#### 方法三：利用 scoped 样式作用域

当仅希望局部范围内更改某个页面上的按钮外观而不干扰其他地方的设计时，可以在单文件组件内使用 `<style scoped>` 来限定样式的影响力:

<style scoped>
.el-button {
  &:hover,&:focus{
      background-color:#67C23A!important;
      border-color:#67C23A!important;
      color:white!important;
  }
}
</style>

<template>
  <!-- 这里的样式只会影响当前组件 -->
  <el-button>测试按钮</el-button>
</template>

这种方式既保持了一定程度上的灵活性又不会引起不必要的副作用，适合用于维护大型应用程序时减少潜在冲突的风险.

怎么设置el-button的默认颜色且不改变hover时颜色的变化

你可以使用以下CSS代码来设置el-button的默认颜色，并且保持hover时颜色的变化不变：

.el-button {
  background-color: #409EFF; /* 设置默认背景色 */
  color: #fff; /* 设置默认文字颜色 */
}

.el-button:hover {
  background-color: #66b1ff; /* 设置hover时的背景色 */
}

这样，el-button的默认背景色会被设置为#409EFF，并且默认文字颜色为白色。当鼠标移动到按钮上时，背景色会变为#66b1ff，文字颜色不变。你可以根据自己的实际需求修改颜色值。