element ui 按钮点击后样式显示为不失去焦点问题 css解决

解决按钮点击不恢复问题
样式重写时需要注意顺序一定要是focus然后hover然后active

参考地址：https://blog.csdn.net/weixin_51141523/article/details/126450012

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<br><br>.el-button--default {
  &:focus {
    color: #606266;
    border-color: #dcdfe6;
    background-color: #fff;
  }
  &:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
  &.is-active,
  &:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: 0;
  }
}
 
.el-button--text {
  &:focus {
    color: #409eff;
    background-color: initial;
    border-color: transparent;
  }
  &:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: transparent;
  }
  &.is-active,
  &:active {
    color: #3a8ee6;
    border-color: transparent;
    background-color: transparent;
  }
}
 
.el-button--primary {
  &:focus {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
  &.is-active,
  &:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
  }
}
 
.el-button--info {
  &:focus {
    color: #fff;
    background-color: #909399;
    border-color: #909399;
  }
  &:hover {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
  &.is-active,
  &:active {
    background: #82848a;
    border-color: #82848a;
    color: #fff;
  }
}
 
.el-button--warning {
  &:focus {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }
  &:hover {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
  }
  &.is-active,
  &:active {
    background: #cf9236;
    border-color: #cf9236;
    color: #fff;
  }
}
 
.el-button--danger {
  &:focus {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }
  &:hover {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
  &.is-active,
  &:active {
    background: #dd6161;
    border-color: #dd6161;
    color: #fff;
  }
}
 
.el-button--success {
  &:focus {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
  &:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }
  &.is-active,
  &:active {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff;
  }
}