微信小程序修改按钮button样式：去边框、圆角及文字居左对齐、修改按钮高度...-优快云博客

本文详细介绍了如何通过CSS样式调整，使小程序中的Button按钮在视觉上与View元素保持一致，包括去除边框、圆角、背景，以及调整文字对齐方式和按钮高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为有要button和view显示的样式相同的需要

所以要去掉按钮的边框，圆角，背景色，文字需要居左对齐，代码如下：

关键是按钮的样式：

1. 去掉边框：

.user-phone-btn::after {
  border: none;
}

2. 去掉圆角（注意border-radius: 0以下两处都要写）：

.user-phone-btn {
  border-radius: 0;

}
.user-phone-btn::after {
  border-radius: 0;
}

3. 去掉背景：设置背景颜色和父view背景颜色相同即可

4. 文字左对齐（要设置margin-lef和padding-left）：

.user-phone-btn {
  margin-left: 0rpx;
  padding-left: 0rpx;
}

5. 修改button高度：需要设置line-height属性，值与height设置相同即可，不然按钮中的文字显示不会居中

具体代码如下：

// .wxml
<view wx:if='{{hasBindingPhoneNumber}}' class='user-phone' >123456789012</view>
<button wx:else class='user-phone-btn'  open-type="getPhoneNumber" lang="zh_CN"  size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindgetphonenumber="bindGetPhoneNumber" hover-class="other-button-hover">buttonText</button>

// .js文件
Page({

  /**
   * 页面的初始数据
   */
  data: {
    defaultSize: 'default',
    disabled: false,
    plain: false,
    loading: false,
  },
})

.user-phone {
  color: white;
  font-size: 28rpx;
}

.user-phone-btn {
  background-color: #FF8EAC;
  font-size: 28rpx;
  border-radius: 0;
  color:white;
  margin-left: 0rpx;
  padding-left: 0rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.user-phone-btn::after {
  border: none;
  border-radius: 0;
}