Widen and heighten the background color and size of the el-button in elementUI, remove the default color border, and the angle of the garden

1. Size setting

To set the width and height, you need to change the size to the minimum and add size="mini" to the el-button to set the width and height.

2. Background color (Moran sample color type type="primary")

(1) If you want to change the background color, the background color style="background: #fb435f"will appear, but it has a default color border.
Add a name to the div outside the primary el-button. .bg_btn >>> .el-button--primary { border: none; }Add this to remove the default border

(2) Add background color method:

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

3. Font size

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

has a default border

After removing

4. Remove the round angle and add this style. The class name el-button–mini can be viewed in the f12 review element

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

Before removing

After removing

5. Source code

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