button边框去除

相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题。例如button的边框无法去除，在为button设置圆角的时候周围会有一些"杂质"，像这样：

边框的存在，使得显示效果并不理想

我们来看一下预期效果：

预期的效果，对比之下效果非常明显

话不多说，直接上关键代码，只需要css样式更改：

/*button样式这里可以根据需求自定义，此处贴出完整css。文章结尾拓展话题会使用，感兴趣的同学可以阅读 */
.button{

  width: 90%;

  height: 80rpx;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30rpx;

  border-radius: 80rpx;

  background-color: #FED322;

}

/*关键代码 .class::after{border:0} 或 .class::after{border:none} 去除边框 */

.button::after{
  border: 0;
}

原因

    熟悉css的同学都知道，控件都具有默认css样式。当为控件设置css样式时，会覆盖默认样式。说到这里大家应该都明白了，微信小程序button控件的边框默认样式是存在于 .class::after中的，因此只需要覆盖.class::after中的默认样式即可去除边框。

button设置背景图片

button设置背景图代码如下：

.button{

  background-image: url('http://********.******.cn/9.jpg');

  background-repeat: no-repeat;

  background-size: 100% 100%;

}

需要注意的是，url中不可以使用本地图片

使用本地图片资源，出现渲染层网络错误

解决方案：

1.将需要作为背景的图片上传至服务器后获取链接使用；

2.使用本地图片，通过样式设置将button放置于image标签之上；

拓展

- button字体居中问题

- button点击效果问题

button字体居中问题

上面的代码除了关键css样式，还设置了

display: flex;

  align-items: center;

  justify-content: center;

tips：当你需要更改button按钮上文字大小时，使用flex居中布局可以避免因为文字或按钮大小更改而导致的button文字不居中问题。

当然该方式依旧存在限制，当button控件宽高过小时，文字会出现换行现象。此时应避免使用尺寸过小的button，过小的button不利于用户点击，同时也是微信小程序并不提倡的样式。

button点击效果问题

button控件在用户触摸时会有反馈，这样做的目的是使交互效果更加完善

官方文档给出的注释：

注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

需要注意的是，当你为button设置了background-image或者background-color时，button的‘hover’交互效果是会消失的

此时可以使用.class:active简单的复原‘hover’交互效果

.buttonBgImg:active{

  background-color: rgba(0, 0, 0, 0.1);

  opacity: 0.7;

}

此时的效果与默认‘hover’效果是存在区别的，如果你追求完美，可以使用js中提供的bindtouchstart和bindtouchend配合来完成这个效果。同时，若你使用本地图片作为背景图时需要添加'hover'交互效果时，css无法满足需求，也可以使用js事件的方式完成该效果。

tips:后续会更新用于预览文章内效果的小程序码