elementUI el-button 点击后样式自动恢复的方法

问题描述：

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

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

解决办法：

给按钮添加样式默认样式，默认样式会覆盖掉focus的样式，再添加上hover样式，这样就能实现将鼠标放在按钮上时会改变样式，但是点击按钮后样式自动恢复到点击前的样子。

以一个默认按钮和一个主要按钮为例，给出代码

第一步：给button添加class

<el-button class="default-button-style">默认按钮</el-button>
<el-button type="primary" class="primary-button-style">主要按钮</el-button>

第二步：给按钮添加默认样式和hover样式

.default-button-style {
    background:#fff;
    border-color:#cbcbcd;
    color:#505255;
}
.default-button-style :hover{
    background:#ecf5ff;
    border-color:#c6e2ff;
    color:#409eff;
}

.primary-button-style {
    background:#2979ff;
    border-color:#2979ff;
}
.primary-button-style :hover{
    background:#66b1ff;
    border-color:#66b1ff;
}