给elementUI中el-button加宽高背景颜色,大小设置,去掉默认颜色边框,园角度

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

3.字体大小

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

有默认边框

在这里插入图片描述

去掉后

在这里插入图片描述

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

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

去掉前

在这里插入图片描述

去掉后

在这里插入图片描述

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;
}
  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值