微信小程序中好看的按钮样式（渐变色）、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;

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

微信小程序中更改button的样式
Button按钮 <button class='getCodeView firstListLineStyle'disabled='{{disabled}}' </button> Bu ...
如何在微信小程序中爬取数据
如何在微信小程序中爬取数据下载Charles 在Charles中点击Help -> SSL Proxying -> Install Charles Root Certificate 然后 ...
小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
微信小程序中尺寸单位rpx及样式的用法
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
图灵机器人 mysql_如何在微信小程序中制作图灵机器人？
本教程讲解了如何在微信小程序中制作图灵机器人?操作起来是很简单的,想要学习的朋友们可以跟着小编一起去看一看下文,希望能够帮助到大家. 开发环境及框架后端:国产java极速框架JFinal(超级好用有 ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
微信小程序中的页面文件和组件
页面文件页面构造器 JS文件页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...

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

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

解决hover设置失效

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

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

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

最新文章

热门文章

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

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

解决hover设置失效

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

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

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

最新文章

热门文章

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