按钮样式

1、.wxml（按钮的样式不生效,可删除app.json里的

"style": "v2"

）

 <button style="width:80%;" class='btn1' open-type='openSetting'>
    <image style="height: 40rpx;" class='btnImg' src='/image/wechat.png'></image>
    <view>确定</view>
 </button>

  <view class="home">
    <button class="btn2" bindtap="home">
      <view>返回主页面</view>
    </button>
  </view>

 

2、.wxss

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}

.btn1::after {
  border-radius: 98rpx;
  border: 0;
  /* border-color: red; */
  /* border和border-color:red只存在一个(border:0是没有边框的,另一个有边框的) */
}



.home{
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 140rpx;
  background-color: rgb(255, 255, 255);
  border-top:solid 1px #e1e1e1;
}




.btn2 {
  width: 85%;
  margin-top: 20rpx;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  height: 82rpx;
  font-weight: 500;
  margin-top: 30rpx;
}

 

效果图