出问题的代码

.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);
}