在微信小程序中，當我們向頁面中插入一個按扭button的時侯只需要簡單的代碼就可以了。

插入button按鈕并保存后，便可以以預覽界面看到一個原始的按鈕。

小程序樣式修改

默認沒有對按鈕設置任何樣式時，按鈕占用整個一行，而按鈕可點區域居中，使用控制臺中的選擇工具

，選擇這個按鈕，查看一下按鈕的默認樣式。

可以看到默認樣式下有主要有button:not、button、button:after幾個來控制按鈕的樣式。可以在控制臺通過開關某個樣式的復選框

來查看其控制效果。

由于這些默認樣式我們是不可更改的，所以就不去一個一個地研究，下面只把按鈕控制的CSS介紹一下，只要 我們在頁面wcss文件中設置我們需要的樣式。

如為button設置一個btn樣式。再定義這個btn樣式(只介紹需要說明的幾個，沒有特殊注意的不列舉說明)：.btn{/*btn樣式設置*/

display:inline-block;/*可以控制按鈕獨占一行還是行內元素建議用inline-block*/

width:auto!important;/*控制按鈕寬度important必備要不無法生效默認為184px*/

margin-left:5px!important;/*按鈕左外距離必須加important否則無效默認auto*/

margin-right:5px!important;/*同上*/

font-weight:normal;/*文字粗細默認為700*/

}

其它諸如文字顏色、文字大小、就和其它的樣式一樣了，此處不多做介紹。

需要注意的時，默認樣式有一個:after屬性，一般如果我們不需要這個屬性時，可以設置其為display:none，如真需要這個after屬性時改為非none就是，只是小程序有默認的after樣式(參看上面圖片中的默認樣式)。

小程序按鈕點擊樣式

點擊時的樣式又是如何定義的呢？也以上面的btn為例，只需要再設置一個.btn.button-hover即可。.btn.button-hover{/*btn點擊樣式*/

color:#c00;

}

至于里面的樣式就隨自己需要設置了。

總結：可以看出，要自定義小程序的按鈕，無非就是三個樣式：按鈕樣式【.btn】、按鈕點擊樣式【.btn.button-hover】、按鈕after樣式【.btn:after】。

總結

以上是生活随笔為你收集整理的微信小程序点击改变css,微信小程序按钮button样式修改自定义的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。