微信小程序实用工具——渐变色按钮（一）

文章目录

微信小程序实用工具——渐变色按钮（一）
- 前言
- 按钮一
- 按钮二
- 按钮三
- 按钮四
- 按钮五
- 按钮六
- 按钮七
- 按钮八

前言

平时我们在开发中的按钮色调过于单调
于是我在网上找了几款好看的渐变色按钮分享一下
下面是动图的效果展示

按钮一

wxml：

<button class="btn btn-grad1">
</button>

wxss：

.btn-grad1 {background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad1:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮二

wxml：

<button class="btn btn-grad2">
</button>

wxss：

.btn-grad2 {background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff  51%, #ff6e7f  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad2:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮三

wxml：

<button class="btn btn-grad3">
</button>

wxss：

.btn-grad3 {background-image: linear-gradient(to right, #003973 0%, #E5E5BE  51%, #003973  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad3:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮四

wxml：

<button class="btn btn-grad4">
</button>

wxss：

.btn-grad4 {background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC  51%, #02AAB0  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad4:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮五

wxml：

<button class="btn btn-grad5">
</button>

wxss：

.btn-grad5 {background-image: linear-gradient(to right, #e52d27 0%, #b31217  51%, #e52d27  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad5:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮六

wxml：

<button class="btn btn-grad6">
</button>

wxss：

.btn-grad6 {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE  51%, #DA22FF  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad6:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮七

wxml：

<button class="btn btn-grad7">
</button>

wxss：

.btn-grad7 {background-image: linear-gradient(to right, #603813 0%, #b29f94  51%, #603813  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad7:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

按钮八

wxml：

<button class="btn btn-grad8">
</button>

wxss：

.btn-grad8 {background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA  51%, #77A1D3  100%);margin: 10px;padding: 15px 45px;text-align: center;text-transform: uppercase;transition: 0.5s;background-size: 200% auto;color: white;            box-shadow: 0 0 20px #eee;border-radius: 10px;display: block;
}.btn-grad8:hover {background-position: right center; /* change the direction of the change here */color: #fff;text-decoration: none;
}

微信小程序实用工具——渐变色按钮（一）相关推荐

微信小程序实用工具——渐变色按钮（二）
今日推荐
微信开发者工具无法选择预览和真机调试_小程序开发第二篇：使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
微信小程序开发者工具怎么使用Less、Sass
微信小程序开发者工具怎么使用Less.Sass 前言一.Sass使用第一步按需导入如何设置Sass 应用 Less使用前言在微信小程序开发者工具中编写wxss样式表是不是感觉很麻烦,不要困 ...
小程序开发工具_有哪些好用的微信小程序开发工具？如何选择？
小程序对商家和个人的帮助很大,可以为商家导入新的线上流量.那么该如何拥有自己的小程序呢?如果你想自己制作小程序的话,目前有两种方式,一种是使用"微信开发者工具",需要精通代码编程, ...
@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...
微信小程序: 微信小程序-开发者工具添加less插件
在入门微信小程序的时候,在其他编译软件中有使用less插件的小伙伴都会发现,在微信小程序- 开发者工具中是没有下载插件这个入口的,所以我们可以借助vscode来辅助微信小程序-开发者工具安装le ...
微信小程序开发工具安装详解
从事java后端工作的程序员,为了不让自己技术落伍,或多或少应该要了解一点前端技术,特别是时下比较火爆的微信小程序,它有取代手机原生app的趋势. 本人对微信小程序是零基础认识,下面记录一下微信小程序 ...
微信小程序如何通过button按钮实现分享（转发）功能
微信小程序如何通过button按钮实现分享(转发)功能导读:微信小程序通过button按钮实现分享(转发)功能有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答.... 微信小程 ...
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题。
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题. 初学者怎么解决呢,建议尝试在设置(setting)_通用设置 _中更改语言,一般有"系统语言". ...

微信小程序实用工具——渐变色按钮（一）

微信小程序实用工具——渐变色按钮（一）

文章目录

前言

按钮一

按钮二

按钮三

按钮四

按钮五

按钮六

按钮七

按钮八

微信小程序实用工具——渐变色按钮（一）相关推荐

最新文章

热门文章