微信小程序 button组件自定义样式

• 背景颜色

wxml代码

<button class='btn' bindtap='sumbit' >确定</button>

wxss代码

.btn {
  width: 90%;
  margin-top: 30rpx;
  background-color: #FFCC00;
  color: #FFF;
}

background-color属性是修改背景颜色的，color是修改字体颜色的，这里注意：如果<button></button>组件里面写 type='....'，修改背景颜色会无效，例如以下代码：

<!--修改背景颜色无效-->
<button class='btn' bindtap='sumbit' type='primary'>确定</button>

• 按钮去边框

小程序里提供的button组件默认带有边框，去掉按钮边框只需要在wxss样式代码中添加：

.btn::after {
  border: 0;
}

• 按钮点击时的背景颜色

wxml代码

<button class='btn' bindtap='sumbit' hover-class='btn_hover'>确定</button>

wxss代码

.btn_hover {
  background-color: pink;
}

这里，hover-class是重点，小程序文档中这样解释这个属性：

类型：String
默认值：button-hover
说明：指定按钮按下去的样式类。当hover-class='none'时，没有点击效果

作者：坐不住的程序员
链接：https://www.jianshu.com/p/80f9d8271d24
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。