自定义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;
  }
}