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

背景颜色

wxml代码

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

wxss代码

1. .btn {
2. width: 90%;
3. margin-top: 30rpx;
4. background-color: #FFCC00;
5. color: #FFF;
6. }

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

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

按钮去边框

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

1. .btn::after {
2. border: 0;
3. }

按钮点击时的背景颜色

wxml代码

1. <button class='btn' bindtap='sumbit' hover-class='btn_hover'>确定</button>
2. wxss代码
3.  
4. .btn_hover {
5. background-color: pink;
6. }

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

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