微信小程序設置按鈕顏色漸變效果的方法:1.創建微信小程序項目;2.在index.wxml文件中添加按鈕組件代碼;3.在index.wxss文件中添加樣式代碼實現漸變;4.保存編輯的代碼并進行調試即可。
具體操作步驟如下:
1、首先在創建一個微信小程序項目。
2、在pages包下的index目錄中index.wxml文件里添加按鈕組件代碼<button>來實現一個簡單的按鈕。
<!--設置一個按鈕 --><button class="goodbutton">按鈕</button>
3、在pages包下的index目錄中index.wxss文件添加樣式代碼來按鈕顏色漸變的效果。
/* border-radius: 98rpx;是控制按鈕邊變圓 */.goodbutton {
margin-top: 30px;
width: 70%;
background: -webkit-linear-gradient(left,pink,lightblue,skyblue);
color: white;
border-radius: 98rpx;
background: bg_red;
}
4、最后保存編輯的代碼進行調試,保存快捷鍵【Ctrl+S】。
在開發工具左側即可看到設計效果。