小程序Button按钮点击样式
微信
2025-03-02 10:47
118
0
WXML:
<view>
<button class="btn-primary">主要按钮</button>
<button class="btn-warning">警告按钮</button>
<button class="btn-default">默认按钮</button>
<button class="custom-button" bindtap="handleButtonClick">自定义按钮</button>
</view>
CSS:
.custom-button {
background-color: #4CAF50; /* 绿色背景 */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px; /* 圆角边框 */
}
.custom-button:hover {
background-color: #45a049; /* 鼠标悬停时颜色变深 */
}
JS：
Page({
data: {},
handleButtonClick: function() {
wx.showToast({
title: '按钮被点击了',
icon: 'success',
duration: 2000
});
}
})
