el-button更改选中后的默认颜色

只差亿点点

已于 2022-12-01 09:58:36 修改

阅读量8.9k

点赞数 3

文章标签： html 前端 javascript

于 2022-09-27 16:19:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_67898309/article/details/127073151

版权

本文介绍如何通过CSS自定义Element UI中按钮的颜色变化效果，包括活动状态和悬停状态的样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先统一设置按钮颜色type="primary"

点击后将颜色改为橘色效果图：

修改样式代码如下：

  .el-button--primary.is-active,
  .el-button--primary:active {
    background: rgb(230, 162, 60);
    border-color: rgb(230, 162, 60);
    color: #fff;
  }

  .el-button--primary:focus,
  .el-button--primary:hover {
    background: rgb(230, 162, 60);
    border-color: rgb(230, 162, 60);
    color: #fff;
  }