更改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

我不睡觉_

11387人浏览 · 2021-10-28 10:17:40

我不睡觉_ · 2021-10-28 10:17:40 发布

原样式

更改后样式

 <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>