微信小程序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'时，没有点击效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容