element-plus （修改主题色 & button新增自定义属性修改样式）_var(--el-color-primary)

styles -> element_theme.less

:root {
  --el-color-primary: #F74023; // 主题色
}
// 分页左右箭头居中显示
.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
  margin: auto;
}
// 表格操作列 无数据时总有一条线问题
.el-table__fixed-right {
  height: -webkit-fill-available;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 12px;    
  height: 12px;
}
::-webkit-scrollbar-thumb {
  background: #ECECEC;
}
::-webkit-scrollbar-track {
  background: #FAFAFA;
  border: none;
}
.el-form-item__label, .my_label {
  font-size: 14px;
  color: #606266;
  font-weight: 700 !important;
}
.el-button--text:hover, .el-button--text:focus, .el-button--text:active {
  color: #D7371E;
}
.el-button.is-plain:active, .el-button--default:hover, .el-button--default:focus, .el-button--default:active {
  background: var(--el-color-white);
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}
// 查询按钮样式
.el-button--primary, .el-button--primary:active{
  background: rgba(247, 64, 35, 1);
  border: none;
  color: #fff;
}
.el-button--primary:hover, .el-button--primary:focus {
  background: rgba(247, 64, 35, 0.8);
  border: none;
  color: #fff;
}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:hover, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:active {
  background: rgba(247, 64, 35, 0.5);
  border: none;
  color: #fff;
}
// 新增按钮样式
.el-button--success.is-plain {
  background: rgba(247, 64, 35, 0.1);
  border-color: rgba(247, 64, 35, 0.4);
  color: rgba(247, 64, 35, 1);
}
.el-button--success.is-plain:hover, .el-button--success.is-plain:focus, .el-button--success.is-plain:active {
  background: rgba(247, 64, 35, 0.8);
  border-color: rgba(247, 64, 35, 0.8);
  color: #fff;
}
.el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:active {
  background: rgba(247, 64, 35, 0.1);
  border-color: rgba(247, 64, 35, 0.4);
  color: rgba(247, 64, 35, 1);
  opacity: 0.5;
}
// 蓝色调文件上传导入类 button-style-origin  文件下载导出类 type="warning" 删除按钮 size="mini" type="text" 
button[button-style-origin], button[button-style-origin]:hover, button[button-style-origin]:focus, button[button-style-origin]:active {
  background: #4A73FE;
  border-color: #4A73FE;
  color: #ffffff;
}
button[button-style-origin]:hover, button[button-style-origin]:focus, button[button-style-origin]:active {
  opacity: 0.8;
}
button[button-style-origin].is-disabled, button[button-style-origin].is-disabled:hover, button[button-style-origin].is-disabled:focus, button[button-style-origin].is-disabled:active {
  background: #4A73FE;
  border-color: #4A73FE;
  color: #ffffff;
  opacity: 0.5;
}
// 详情类按钮样式
button[button-style-details] {
  background: #4A73FE;
  border-color: #4A73FE;
  color: #ffffff;
  padding: 0px 4px;
  min-height: 24px;
}
button[button-style-details]:hover, button[button-style-details]:focus, button[button-style-details]:active {
  background: #4A73FE;
  border-color: #4A73FE;
  color: #ffffff;
  opacity: 0.8;
}
button[button-style-details].is-disabled, button[button-style-details].is-disabled:hover, button[button-style-details].is-disabled:focus, button[button-style-details].is-disabled:active {
  background: #4A73FE;
  border-color: #4A73FE;
  color: #ffffff;
  opacity: 0.5;
}
// button-style-border-grey 白底灰边框黑字
button[button-style-border-grey], button[button-style-border-grey]:hover, button[button-style-border-grey]:focus, button[button-style-border-grey]:active {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 2px;
  padding: 0px 4px;
  min-height: 24px;
}
button[button-style-border-grey]:hover, button[button-style-border-grey]:focus, button[button-style-border-grey]:active {
  opacity: 0.8;
  border-color: rgba(247, 64, 35, 1);
  color: rgba(247, 64, 35, 1);
}
button[button-style-border-grey].is-disabled, button[button-style-border-grey].is-disabled:hover, button[button-style-border-grey].is-disabled:focus, button[button-style-border-grey].is-disabled:active {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 2px;
  padding: 0px 4px;
  opacity: 0.5;
}
// button-style-border-red 白底红边框红字
button[button-style-border-red], button[button-style-border-red]:hover, button[button-style-border-red]:focus, button[button-style-border-red]:active {
  background: #ffffff;
  border-color: rgba(247, 64, 35, 0.4);
  color: #F74023;
  border-radius: 2px;
  padding: 0px 4px;
  min-height: 24px;
}
button[button-style-border-red]:hover, button[button-style-border-red]:focus, button[button-style-border-red]:active {
  opacity: 0.8;
}
button[button-style-border-red].is-disabled, button[button-style-border-red].is-disabled:hover, button[button-style-border-red].is-disabled:focus, button[button-style-border-red].is-disabled:active {
  background: #ffffff;
  border-color: rgba(247, 64, 35, 0.4);
  color: #F74023;
  border-radius: 2px;
  opacity: 0.5;
}
// button-style-block 黑底白字
button[button-style-block], button[button-style-block]:hover, button[button-style-block]:focus, button[button-style-block]:active {
  background: #121926;
  border-color: #121926;
  color: #ffffff;
  padding: 0px 4px;
  min-height: 24px;
}
button[button-style-block]:hover, button[button-style-block]:focus, button[button-style-block]:active {
  opacity: 0.8;
}
button[button-style-block].is-disabled, button[button-style-block].is-disabled:hover, button[button-style-block].is-disabled:focus, button[button-style-block].is-disabled:active {
  background: #121926;
  border-color: #121926;
  color: #ffffff;
  opacity: 0.5;
}
// button-style-view 操作里的按钮 红底白字
button[button-style-view], button[button-style-view]:hover, button[button-style-view]:focus, button[button-style-view]:active {
  background: #F74023;
  border: none;
  color: #ffffff;
  padding: 0px 4px;
  min-height: 24px;
}
button[button-style-view]:hover, button[button-style-view]:focus, button[button-style-view]:active {
  opacity: 0.8;
}
button[button-style-view].is-disabled, button[button-style-view].is-disabled:hover, button[button-style-view].is-disabled:focus, button[button-style-view].is-disabled:active {
  background: #F74023;
  border: none;
  color: #ffffff;
  padding: 0px 4px;
  min-height: 24px;
  opacity: 0.5;
}
// button-style-text-block 黑字
button[button-style-text-block], button[button-style-text-block]:hover, button[button-style-text-block]:focus, button[button-style-text-block]:active {
  color: #666;
}
button[button-style-text-block]:hover, button[button-style-text-block]:focus, button[button-style-text-block]:active {
  color: #999;
}
button[button-style-text-block].is-disabled, button[button-style-text-block].is-disabled:hover, button[button-style-text-block].is-disabled:focus, button[button-style-text-block].is-disabled:active {
  color: #999;
}

使用：

<el-button size="mini" button-style-view @click="toOrder(scope.row)">查看订单</el-button>

参考： https://segmentfault.com/q/1010000040393608?utm_source=sf-similar-question