【 element-ui/element-plus 】button按钮样式修改

最新推荐文章于 2025-03-17 16:56:52 发布

要来一个西瓜吗~~~

最新推荐文章于 2025-03-17 16:56:52 发布

阅读量827

点赞数 2

文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/weixin_63904044/article/details/144827687

版权

基础按钮

// 红色背景色---基础按钮
.el-button--primary {
  color: #ffffff;
  background-color: #f31414;
  border-color: #f31414;
}

.el-button--primary.is-active,
.el-button--primary:not(.el-button--small):active {
  color: #f31414;
  background-color: #fff;
  border-color: #f31414;
}

.el-button--primary:focus,
.el-button--primary:hover {
  color: #f31414;
  background-color: #fff;
  border-color: #f31414;
}

特殊处理的按钮加上class类名单独处理


//背景没有红色的按钮
.el-button--primary.bac {
  color: #333;
  background-color: #ffffff;
  border-color: #b9b9b9;
}

.el-button--primary.bac.is-active,
.el-button--primary.bac:active {
  color: #f31414;
  background-color: #fff;
  border-color: #f31414;
}

.el-button--primary.bac:focus,
.el-button--primary.bac:hover {
  color: #f31414;
  background-color: #fff;
  border-color: #f31414;
}

在MessageBox中的按钮需要单独选中，根据审查元素按钮的样式进行针对性的样式设置

.el-message-box {
  .el-message-box__btns {
    justify-content: right;
    // 按钮的整体样式
    .el-button {
      font-size: 16px;
      width: 96px;
      height: 40px;
      border-radius: 8px;
    }

    //按钮的默认颜色（取消按钮的样式）
    .el-button--default.is-active,
    .el-button--default:active {
      color: #f31414;
      background-color: #ffdee1;
      border-color: #f31414;
    }

    .el-button--default:focus,
    .el-button--default:hover {
      color: #f31414;
      background-color: #fff;
      border-color: #f31414;
    }
  }

  // 没有背景色---基础按钮（确认按钮的样式）
  .el-button--primary.el-button--small {
    color: #ffffff;
    background-color: #f31414;
    border-color: #f31414;
  }

  .el-button--primary.el-button--small.is-active,
  .el-button--primary.el-button--small:active {
    color: #ffffff;
    background-color: #f31414;
    border-color: #f31414;
  }

  .el-button--primary.el-button--small:focus {
    color: #ffffff;
    background-color: #f31414;
    border-color: #f31414;
  }

  .el-button--primary.el-button--small:hover {
    color: #f31414;
    background-color: #ffffff;
    border-color: #f31414;
  }
  //
}


//存在border时可以清除样式
.el-message-box__btns {
  .el-button:focus-visible {
    outline: 0px;
  }
}