button属性

element-plus（修改主题⾊button新增⾃定义属性修改样式）

styles->element_

:root{

--el-color-primary:#F74023;//主题⾊

}

//分页左右箭头居中显⽰

.-icon,.-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;

}

.-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;

}

.-disabled,.-disabled:hover,.-disabled:focus,.-disabled:active{

background:rgba(247,64,35,0.5);

border:none;

color:#fff;

}

//新增按钮样式

.-plain{

background:rgba(247,64,35,0.1);

border-color:rgba(247,64,35,0.4);

color:rgba(247,64,35,1);

}

.-plain:hover,.-plain:focus,.-plain:active{

background:rgba(247,64,35,0.8);

background:rgba(247,64,35,0.8);

border-color:rgba(247,64,35,0.8);

color:#fff;

}

.-disabled,.-disabled:hover,.-disabled:focus,.-

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-disab

background:#4A73FE;

border-color:#4A73FE;

color:#ffffff;

opacity:0.5;

}

//详情类按钮样式

button[button-style-details]{

background:#4A73FE;

border-color:#4A73FE;

color:#ffffff;

padding:0px4px;

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-d

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:0px4px;

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-s

background:#ffffff;

border-color:rgba(0,0,0,0.15);

color:rgba(0,0,0,0.65);

border-radius:2px;

padding:0px4px;

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:0px4px;

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

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:0px4px;

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-disable

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:0px4px;

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:a

background:#F74023;

border:none;

color:#ffffff;

padding:0px4px;

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-te

color:#999;

}

使⽤：

查看订单