给elementUI中el-button加宽高背景颜色，大小设置，去掉默认颜色边框,园角度_element修改按钮大小与颜色

1.尺寸大小设置

设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height

2.背景颜色 ( 默然样色类型 type=“primary” )

(1) 想要改变背景颜色 style="background: #fb435f" 就出现背景颜色 ，但是本身有默认颜色边框他的primary
el-button外面div加个名 .bg_btn >>> .el-button--primary { border: none; } 加这个就可以去掉默认边框

(2) 加背景颜色方法:

  .bg_btn button { width: 41px; height: 18px; background: #fb435f; } 
  .bg_btnbutton:first-child { background: #0cc87e; } 
1
2

3.字体大小

 .bg_btn span { position: relative; bottom: 5px; right: 5.2px; }
1

有默认边框

去掉后

4.去掉圆角度,加这个样式.el-button–mini这个class名在f12审查元素可查看

.bg_btn .el-button--mini {
    border-radius: inherit;
}
1
2
3

去掉前

去掉后

5.源码

 <div class="bg_btn">
        <el-button size="mini" type="primary" @click="ignore(item, index)"><span>忽略</span></el-button>
  		<el-button size="mini" style="background: #fb435f" type="primary" @click="buy(item, index)"><span>购买</span></el-button>
 </div>

.bg_btn {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 40%;
    width: 50%;
    height: 27px;
}
.bg_btn >>> .el-button--primary {
    border: none;
}
.bg_btn button {
    width: 41px;
    height: 18px;
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #ffffff;
    position: relative;
    left: 20%;
    background: #fb435f;
}
.bg_btn button:first-child {
    background: #0cc87e;
}
.bg_btn span {
    position: relative;
    bottom: 5px;
    right: 5.2px;
}
.bg_btn .el-button--mini {
    border-radius: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38