修改el-button按钮背景色后，按钮失去了elementUI原有的hover和active的效果

这个问题通常是因为你在CSS中覆盖了Element UI的默认样式，从而导致hover和active状态的样式没有正确应用。

解决方法：

1. 使用更具体的CSS选择器来确保你的样式规则优先级高于Element UI的默认样式。
2. 在你的自定义样式中添加hover和active状态的样式规则。

示例代码：

/* 确保使用更具体的选择器来覆盖背景色 */
.el-button.custom-button {
  background-color: #f00; /* 你想要的任何颜色 */
  border-color: #f00; /* 可能需要调整边框颜色以匹配背景 */
  color: #fff; /* 按钮文字颜色 */
}
 
/* 添加hover和active状态的样式 */
.el-button.custom-button:hover {
  background-color: #ff3300; /* 鼠标悬停时的背景色 */
  border-color: #ff3300;
}
 
.el-button.custom-button:active {
  background-color: #c00000; /* 按钮被激活（按下）时的背景色 */
  border-color: #c00000;
}

在HTML中使用：

<el-button class="custom-button">按钮</el-button>

确保你的自定义样式在Element UI的样式之后加载，这样可以避免优先级问题。如果使用了本地的Element CSS，可以考虑使用Less变量来自定义颜色，这样可以更方便地维护样式。