今天来改变elementui中的按钮默认颜色!

这是你需要做的页面:
今天来改变elementui中的按钮默认颜色!_第1张图片
这是你做的页面
今天来改变elementui中的按钮默认颜色!_第2张图片

发现按钮颜色是框架中没有的
于是我们自己写个色
1. 利用ps找颜色
(我找好啦 为了后面方便我用转换器把rgb换成了16进制)
今天来改变elementui中的按钮默认颜色!_第3张图片
2.我的按钮代码:主要注意type(可以自命名)

"success">搜索
"warning">重置

3. 他们的style

.el-button--success{background: #23C6C8;}
.el-button--warning{background: #FCB065;}

4. 那这个时候鼠标悬停、点击等还是原来颜色
今天来改变elementui中的按钮默认颜色!_第4张图片
打开网页F12:
今天来改变elementui中的按钮默认颜色!_第5张图片
找到了你要改的选项(active、hover、focus…)
直接写在你的style代码里

6. 现在的style

.el-button--success,.el-button--success:focus,.el-button--success.is-active, .el-button--success:active{background: #23C6C8;}
.el-button--warning,.el-button--warning:focus,.el-button--warning.is-active, .el-button--warning:active{background: #FCB065;}
.el-button--success:hover {
    background: #8cd8da;
    border-color: #8cd8da;
    color: #FFF;
}
.el-button--warning:hover {
    background: #f5d7b9;
    border-color: #f5d7b9;
    color: #FFF;
}

你可能感兴趣的:(css,vue.js)