微信小程序：去掉button默认样式

去除button默认样式：

/* 去掉背景色和内外边距 */
button {
    margin: 0;
    padding: 0;
    background-color: inherit;
    position: static;
}
button:after {
    content: none;
}
/* 去掉边框 */
button::after {
    border: none;
}

实例: 分享按钮

用户需要点击按钮分享当前页面，不过按钮样式需要自定义

<view class="btn-wrap">
<view class="btn-wrap__text">微信好友</view>
        <button open-type="share"
                class="btn-wrap__btn"></button>
</view>

通过绝对定位，让button在自定义元素之上，以便用户点击

.btn-wrap {
    position: relative;
   
  &__btn {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: inherit;
      padding: 0;
      margin: 0;
     
      &::after {
        border: none;
      }
    }
}