uni-app中的button按钮，去掉默认的灰色边框

lemontree-xy

已于 2023-07-12 10:30:42 修改

阅读量2.6k

点赞数 1

分类专栏： css3 uniapp 文章标签：前端 uni-app

于 2023-07-12 10:20:39 首次发布

本文链接：https://blog.csdn.net/weixin_43337481/article/details/131675544

版权

uniapp 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

<button class="blue-btn-fill">点赞</button><button class="blue-btn-hollow">已关注</button>

效果如下

想要去掉默认的灰色边框，加上自己要的样式，需要修改如下代码

//这里是去掉边框的
uni-button:after {
	border: none;
}
//这里是对整体按钮定义样式
uni-button {
	border-radius: $border-radius-sm;
	line-height:40rpx;
	font-size: 24rpx;
}
//实心按钮
.blue-btn-fill {
	background-color:$color-primary;
	color:#fff;
	margin-right: 10px;
}
//空心按钮
.blue-btn-hollow {
	color:$color-primary;
	border: 1px solid $color-primary;
}

实现如下效果