出问题的代码

.el-button:focus, .el-button:hover {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
}

以下是引用 另一个博主的说明:
所以有如下动作效果:
①当悬浮不点击时,触发.el-button:hover;
②点击按下鼠标时,触发.el-button:active;
③点击抬起鼠标时,触发.el-button:focus, .el-button:hover;
④移开鼠标时,仍然触发.el-button:focus;
⑤移开后点击别处,触发.el-button。

原文链接:https://blog.csdn.net/kangrushuai/article/details/114686368

解决办法:
重新定义,使用:not 让 3和4 有不同的效果即可。
解决方式:

/*鼠标点击后移开,恢复本身样式*/
.el-button,
.el-button:focus:not(.el-button:hover) {
  border-color: var(--el-button-border-color);
  background-color: var(--el-button-bg-color);
}

03-24 21:11