有时候需要通过微信小程序 button 设置 open type 来获取用户的信息。这时候就不能用 view 来实现，必须使用 button。
但是 button 默认带了样式，需要将默认样式清除掉。
可以在定义一个 reset_btn 的样式来重置 button 的样式。
代码示例
.reset_btn {
margin:0;
padding:0;
border-radius:0;
border:none;
font-size:1em;
background-color:transparent;
}
.reset_btn::after{
border: none;
}
若外层有背景样式，可以将 button 的宽高设置百分百来完全覆盖。别忘了设置居中。
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
但实际测试这个 class 中的 width 不起左右，还是加在 inline style 中有效。
举例说明
例如，我要自定义小程序分享按钮的样式：
invite_btn 中定义了具体的样式，诸如设置的背景图、大小等。
<view class="invite_btn flex_all_center">
<button class="reset_btn inner_btn" open-type="share" style="color: #fff; width: 650rpx;">
邀请好友注册得积分
</button>
</view>
终极解放方案
然而小程序按钮在部分华为手机和 iphone 8 以上依然有高度的问题。即便设置了 width height important 也不行。
在小程序官方论坛里找到一个终极解决方案，而且实现起来也简单，且代码结构更清晰。
思路是：
- 将按钮绝对定位到目标区域之上
- 同时设置按钮为完全透明
.sky_btn {
position: absolute;
top: 0;
opacity: 0;
width: 100% !important;
height: 100% !important;
z-index: 999;
}
注意在 button 中随便加段文本：
<view class="enter_info flex center v_center" wx:if="{{isLogin}}">
完善资料
<image src="/images/right.png"
style="width: 9rpx; height: 18rpx;margin-left:9rpx;"></image>
<button class="reset_btn sky_btn" open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo" data-btn="edit">
text
</button>
</view>
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式