【微信小程序】-去除button的默认背景

在使用button 组件的时候，如果不进行特殊的设置，button 会有一个默认的背景，而UI设计师给到的样式图，基本上都是去掉那难看的边框的。

    <view class="modal-footer">
      <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
      <button class="btn-confirm" form-type="submit" >确定</button>
    </view>

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
  font-size: 34rpx;
}

.btn-confirm {
  width: 50%;
  color: #008DF8;
  text-align: center;
}

如上代码，显示的效果如图，有两个小细节不太符合预期：
1、确定按钮会有一个边框；
2、文字不居中；

image.png

解决方式

我们最开始能够想到的解决方式肯定是在css 样式里面让背景和边框去掉，如下：

.btn-confirm {
  width: 50%;
  color: #008DF8;
  text-align: center;
  border: none;
  border-radius:0;
  background-color:transparent;
}

但添加了如上逻辑之后，边框还是一样存在。真正能够解决问题的方式是增加伪类选择器:after，如下：

.btn-confirm::after {
  border: none;
}

至于文案大小不一致的问题，只需要两个样式都指定文字大小即可.

.btn-confirm {
  width: 50%;
  color: #008DF8;
  text-align: center;
  font-size: 34rpx;
}

.btn-confirm::after {
  border: none;
}

修改后的样式如下：

image.png