微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效

好看1：

.wxss

/* 从上往下渐变 */
.bt_1{
  margin-top: 40rpx;
  background: linear-gradient(#ccfbff, #ef96c5); 
}

好看2：

.wxss

/* 从左往右渐变 */
.bt_2{
  margin-top: 40rpx;
  background: linear-gradient(to right, #ead6ee, #a0f1ea); 
}

好看3：

.wxss

/* 对角渐变 */
.bt_3{
  margin-top: 40rpx;
  background: linear-gradient(to bottom right, #eebd89, #d13abd);
}

好看4：

.wxss

/* 半透明渐变 */
.bt_4{
  margin-top: 40rpx;
  background: linear-gradient(rgb(252, 126, 67), rgba(255,0,0,0)); 
  width: 80%;  
  border-radius: 50rpx;
  /* background: bg_red; */
}

 

好看5：

在.wxss文件中代码如下：

/* border-radius: 98rpx;是控制按钮边变圆 */
.goodbutton {
  margin-top: 30px;
  width: 80%;
  background-color: rgb(252, 126, 67);
  color: white;
  border-radius: 98rpx;
  background: bg_red;
}

/* 按下变颜色 */
.hover {
    top: 3rpx;
    background:  rgb(236, 179, 156);
}

在.wxml文件中的代码如下：

<button class='goodbutton'  hover-class="hover">激活</button>

好看6：

.wxss

/* 多色渐变 */
.bt_6{
  margin-top: 40rpx;
  background: linear-gradient(to right,#f9957f, #f2f5d0, #aebaf8, #c973ff );
  width: 80%;  
  border-radius: 50rpx;
  
}

 

第二种方式：漂亮的圆角边框和点击变颜色效果（view的点击效果也是这样实现）

.bt_connect{
  width: 200rpx;
  height: 70rpx;
  color: #6699FF;
  border: 3rpx solid #6699FF;
  border-radius: 80rpx;
  font-size: 35rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 按钮的点击效果 */
.hover-class-1 {
  top: 3rpx;
  background-color: #e7f5ff;
}

在.wxml文件中的代码如下：

<button class="bt_connect" hover-class="hover-class-1" bindtap="connect">连接</button>

wxss代码：

.btn {
  display: inline-block;
  margin: 20px;
  padding: 1em 2em;
  background: transparent;
  border: 2px;
  border-radius: 3px;
  font-weight: 400;
  text-align: center;
  box-shadow: 0px 2px 4px #67c0f0,0px 1px 2px #bf2fcb;
}


.btn text {
  background: -webkit-linear-gradient(left, #67c0f0, #bf2fcb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

wxml代码：

<view class="btn blue">
    <text>Buy Tickets Now</text>
  </view>

 

 

9种好看的渐变色网址：https://baijiahao.baidu.com/s?id=1644345842477287270&wfr=spider&for=pc

https://baijiahao.baidu.com/s?id=1643628153687951381&wfr=spider&for=pc

 

最后补充一种

background: linear-gradient(to right, #0385f5, #17b4bd);

解决hover设置失效

添加 !important，如下：

.hover-ship { 
  color: rgb(235, 107, 107) !important;		
}

解决在"style": "v2"环境中 设置按钮宽度失效

width: 500rpx !important;

加入!important即可

解决有时候会有一个很小的边框

border: none;