自定義element-ui的button組件樣式

項目中需要實現的效果如圖:

 

HTML部分:

<el-button style="margin-left:30px">手動</el-button>
<el-button style="margin-left:30px">自動</el-button>

CSS部分:

.el-button {
    width: 100px;
    height: 50px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    border: transparent;
    overflow: hidden;
  &:hover{
    background: linear-gradient(139deg, #dd2e9b 0%, #f47039 99%);
    color: #fff;
  }
  &:focus{
    background: linear-gradient(139deg, #dd2e9b 0%, #f47039 99%);
    color: #fff;
  }
}