背景顏色

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組件默認(rèn)帶有邊框，去掉按鈕邊框只需要在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  默認(rèn)值：button-hover  說明：指定按鈕按下去的樣式類。當(dāng)hover-class='none'時，沒有點擊效果。