更改el-button按钮的悬浮和点击样式

原样式

 更改后样式

 

 <el-button class='el-buttons' size="small" plain>朴素按钮</el-button>

<style scoped>
 .el-buttons {
    background: #22415d;
    color: #b9c4d3;
    border: 1px solid #126ca0;
    opacity: 1
  }

</style>

<style>

  .el-button:active {
    background: #126c9e !important;
    font-weight: bold;
  }
/*按钮悬浮*/
  .el-button:hover {
    background: #126c9e !important;
    color: white !important;
    font-weight: bold;
    border-color: #01a8f9 !important;
  }
  /*按钮点击*/
  .el-button:focus {
    background: #126c9e !important;
    color: white !important;
    font-weight: bold;

    border-color: #01a8f9 !important;
  }


</style>