小程序 按钮 变成 纯色 按钮 的样式 案例

小程序  按钮 的设置 。设置 边框无。

修改头像是个按钮。

  <view class="item">
    <view>
      <image class="headimgurl" src="{{baseURL+xcxUser.headimgurl}}" />
    </view>
    <view style="display: flex; align-items: center;">
      <button open-type="chooseAvatar" bindchooseavatar="onChooseImage" class="text_c2_btn">修改头像</button>
      <image class="right" src="/assets/images/right2.png" />
    </view>
  </view>
  
  
  
.text_c2_btn{
  border: 1rpx solid white !important;
  background-color: transparent !important; 
  font-size: 30rpx;
  background-color: white;
}
button::after {
  border: none !important;  /* 移除默认边框 */
}

   <view>
            <button bind:tap="yuding" data-index="{{index}}" class="buy_c2_btn">预订</button>
          </view>
          
          .buy_c2_btn {
  border: 1rpx solid white !important;
  background-color: transparent !important;
  font-size: 28rpx !important;
  background-color: white;
  border-radius: 15rpx;
  padding: 8rpx 20rpx 8rpx 20rpx;
  width: 140rpx !important;
  background: linear-gradient(45deg, #ff5144d6, #F44336);
  border-radius: 25rpx;
  color: white !important;
  font-weight: 500;
}

button::after {
  border: none !important;
  /* 移除默认边框 */
}

  <view class="bottom_btn">
    <view style="width: 100rpx; text-align: center;">
      <image src="/assets/images/wx_share.png" />
      <view style="font-size: 23rpx; color: #252525;">分享</view>
    </view>
    <view bind:tap="open_zixun_window" style="flex:1; position: relative;">
      <button class="zixun_btn">立即咨询</button>
      <image class="zixun_img" src="/assets/images/zixun.png" /> 
    </view>

    <view bind:tap="create_order" style="flex:1;">
      <button class="yuding">立即预订</button>
    </view>
  </view>

  
.bottom_btn{
  gap: 15rpx;
  width: 100%;
  display:flex;
  justify-content: space-between;   
  position: fixed;
  bottom: 0rpx;
  /* padding: 15rpx 15rpx 15rpx 15rpx ; */
  background-color: white;
  border: 1rpx solid #d8d8d8;
  align-items: center;
  padding: 10rpx 0rpx 0rpx 0rpx;
}

.bottom_btn image{
  width: 60rpx;
  height: 60rpx;
}

.zixun_img{
  width: 50rpx !important;
  height: 50rpx !important;
  position :absolute;
  left: 30rpx;
  top: 10rpx;
}
.zixun_btn{
  line-height: 1.3  !important;
  width: 90% !important;
  margin: 0rpx  !important;
  font-weight:500;
  font-size: 32rpx;
  border-radius: 50rpx;
  border: 1rpx solid #ffd6be;
  color: #ff6e25;
  background-color: #fff5ef;
  text-align: right;
}

.yuding{
  line-height: 1.3 !important;
  width: 90% !important;
  margin: 0rpx  !important;
  color: white;
  font-weight:500;
  font-size: 32rpx;
  border: 0rpx solid #FFCC80;
  border-radius: 50rpx;
  /* 渐变背景 */
  background-image: linear-gradient(to right,
  #ff7a03,
  /* 标准橙色 */
  #ff5d20,
  /* 中等橙 */
  #ff403b
  /* 浅橙色 */
)
}
.yuding::after {
  border: none !important;  /* 移除默认边框 */
}