elementUI el-button 点击后样式自动恢复的方法 （纯css已解决）

问题描述：

vue3项目中 elementUI 中的按钮，点击后会有focus样式，且只有点击其他地方后，按钮才会失焦，样式才会恢复到点击之前的样式。例如主要按钮是亮蓝色，点击后是暗蓝色。点击其他地方才会恢复亮蓝色。

我希望将鼠标放在按钮上时会改变样式，但是点击按钮后样式自动恢复到点击前的样子。

解决办法：
在全局css中对按钮添加样式，点击完后也还是对应颜色不会变暗。

//全局修改失焦后的样式

primary类型按钮
.el-button.el-button--primary.is-link:not(.is-disabled):focus, .el-button.el-button--primary.is-link:not(.is-disabled):hover{
  color:var(--el-color-primary)!important;
}

warning类型按钮
//.el-button.el-button--warning.is-link:not(.is-disabled):focus, .el-button.el-button--warning.is-link:not(.is-disabled):hover{
//  color:var(--el-color-warning)!important;
//}

success类型按钮
//.el-button.el-button--success.is-link:not(.is-disabled):focus, .el-button.el-button--success.is-link:not(.is-disabled):hover{
//  color:var(--el-color-success)!important;
//}

info类型按钮
//.el-button.el-button--info.is-link:not(.is-disabled):focus, .el-button.el-button--info.is-link:not(.is-disabled):hover{
//  color:var(--el-color-info)!important;
//}

danger类型按钮
.el-button.el-button--danger.is-link:not(.is-disabled):focus, .el-button.el-button--danger.is-link:not(.is-disabled):hover{
  color:var(--el-color-danger)!important;
}