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

这是你需要做的页面:
在这里插入图片描述
这是你做的页面
在这里插入图片描述

发现按钮颜色是框架中没有的
于是我们自己写个色
1. 利用ps找颜色
(我找好啦 为了后面方便我用转换器把rgb换成了16进制)
在这里插入图片描述
2.我的按钮代码:主要注意type(可以自命名)

<el-button type="success">搜索</el-button>
<el-button type="warning">重置</el-button>

3. 他们的style

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

4. 那这个时候鼠标悬停、点击等还是原来颜色
在这里插入图片描述
打开网页F12:
在这里插入图片描述
找到了你要改的选项(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;
}

在这里插入图片描述

  • 16
    点赞
  • 27
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

栀妹儿

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值