去掉微信小程序button组件原有样式

最新推荐文章于 2024-02-27 20:12:52 发布

赵自煜

最新推荐文章于 2024-02-27 20:12:52 发布

阅读量675

点赞数

分类专栏：小程序 CSS 文章标签：微信

本文链接：https://blog.csdn.net/zhaoshidaye666/article/details/119947048

版权

小程序同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过CSS调整HTML中的分享按钮，包括设置open-type属性、去除padding和margin、调整图片与文字布局、移除边框、修改图片圆角，并添加适当间距。适合前端开发者进行UI定制。

摘要由CSDN通过智能技术生成

背景：需要做一个分享功能，需要使用<button>的属性open-type触发该功能。
最终效果
按钮内有图片和文字

去掉padding和margin

<button style="padding: 0; margin: 0;">
	<image />
	<view>分享</view>
</button>

去掉图片和字体间的空隙（把两个元素变为block，块级元素）

<button style="padding: 0; margin: 0;">
	<image style="width: 32rpx; margin: 0 auto; display: block;" mode="widthFix"/>
	<view style="line-height: 28rpx;">分享</view>
</button>

去掉按钮的边框

<view class="removeButtonStyle">
	<button style="padding: 0; margin: 0;">
		<image style="width: 32rpx; margin: 0 auto; display: block;" mode="widthFix"/>
		<view style="line-height: 28rpx;">分享</view>
	</button>
</view>

.removeButtonStyle button::after {
	border: none;
}

发现图片有圆角，把它去掉

<view class="removeButtonStyle">
	<button style="padding: 0; margin: 0; border-radius: 0;">
		<image style="width: 32rpx; margin: 0 auto; display: block;" mode="widthFix"/>
		<view style="line-height: 28rpx;">分享</view>
	</button>
</view>

图片和文件间还需要一点距离

<view class="removeButtonStyle">
	<button style="padding: 0; margin: 0; border-radius: 0;">
		<image style="width: 32rpx; margin: 0 auto; display: block;" mode="widthFix"/>
		<view style="line-height: 28rpx; margin-top: 12rpx;">分享</view>
	</button>
</view>

赵自煜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
去掉微信小程序button组件原有样式

背景：需要做一个分享功能，需要使用<button>的属性open-type触发该功能。按钮内有图片和文字去掉padding和margin<button style="padding: 0; margin: 0;"> <image /> <view>分享</view></button>去掉图片和字体间的空隙（把两个元素变为block，块级元素）<button style="padding: 0; marg
复制链接

扫一扫

专栏目录