方法一：自己手撸

手撸方法一： 在不需要批量使用的情况下 行内修改 style

手撸方法二：

<span class="btn-1"></span>
.btn-1 {
  color: #2D6EFB;
  border-color: #2D6EFB;
  border: 1px solid #2D6EFB;
  background: #FFFFFF;
}
.btn-1:hover{
  color: white;
  background-color: rgba(45, 110, 251, 0.8);
  border-color: rgba(45, 110, 251, 0.8);
}

方法二：改element按钮的type

<el-button type="whiteBackground" class="backPlay"></el-button>

这个是修改方法之一 ： 可以 取消 【点击之后不触发别的事件就一直保持按钮hover状态】

.backPlay{
  &:hover{
    background-color: #2D6EFB;
    color: #FFFFFF;
  }
}
.el-button--whiteBackground {
  color: #2D6EFB;
  // background-color: #2D6EFB;
  border-color: #2D6EFB;
}

这是整套按钮type样式方案 最下面的active是点击时的按钮状态

.el-button--whiteBackground {
  color: #2D6EFB;
  // background-color: #2D6EFB;
  border-color: #2D6EFB;
}
.el-button--whiteBackground:focus,
.el-button--whiteBackground:hover {
  background: #2D6EFB;
  border-color: #2D6EFB;
  color: #fff;
}
.el-button--whiteBackground.is-active,
.el-button--whiteBackground:active {
  background: #FFFFFF;
  border-color: #2D6EFB;
  color: #2D6EFB;
}