element的icon、button实现渐变色_elementplus button按钮颜色改为渐变色

效果如图所示:

代码如下：

<div class="login__form">
      <div style="margin-top:10%;text-align:center">
        <el-input style="width:80%" v-model="login.name" prefix-icon="el-icon-user" placeholder="请输入您的账号"></el-input>
      </div>
      <div style="margin-top:6%;text-align:center">
        <el-input style="width:80%" v-model="login.password" type="password" show-password   prefix-icon="el-icon-lock" placeholder="请输入您的密码"></el-input>
      </div>
      <div style="margin-top:8%;text-align:center">
        <el-button  @click="toLogin()" style="width:80%"><span>登录</span></el-button>
      </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11

<style lang="less" scoped>
login__form {
    /deep/ .el-input__inner {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid #C0C4CC;
    }
    /deep/ .el-input__inner:hover {
      border-bottom: 1px solid #409EFF;
    }
    /deep/ .el-icon-user:before{
    -webkit-line-clamp: 2;
    font-size: 25px;
    background-image: -webkit-linear-gradient(bottom, #59C2FD,#3F79F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    /deep/ .el-icon-lock:before {
    -webkit-line-clamp: 2;
    font-size: 25px;
    background-image: -webkit-linear-gradient(bottom, #59C2FD,#3F79F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    /deep/ .el-button {
      background:-webkit-gradient(linear, 100% 0%, 0% 0%,from(#59C2FD), to(#2B99FF));
      border-radius: 20px;
      color: #fff;
    }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31