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

news2024/11/6 13:37:01

今日推荐💁‍♂️


2023五月天演唱会🎤🎤🎤大家一起冲冲冲🏃‍♂️🏃‍♂️🏃‍♂️
在这里插入图片描述


文章目录

    • 今日推荐💁‍♂️
    • 🏖️开头介绍 👨‍🏫
    • 1️⃣ 按钮一 ▶️
    • 2️⃣ 按钮二 ▶️
    • 3️⃣ 按钮三 ▶️
    • 4️⃣ 按钮四 ▶️
    • 5️⃣ 按钮五 ▶️
    • 6️⃣ 按钮六 ▶️
    • 🍉文末推荐 👨‍🏫

🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

🏖️开头介绍 👨‍🏫


🎃内容介绍:
👉这次给大家带来六个我见到比较喜欢的按钮样式,接下来我将逐一介绍这六个按钮的样式和代码

📋整体展示:
在这里插入图片描述

🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

1️⃣ 按钮一 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad1">按钮一</button>
</view>
.btn-grad1 {
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-grad1:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

2️⃣ 按钮二 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad2">按钮二</button>
</view>
.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;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

3️⃣ 按钮三 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad3">按钮三</button>
</view>
.btn-grad3 {
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-grad3:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

4️⃣ 按钮四 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad4">按钮四</button>
</view>
.btn-grad4 {
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-grad4:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

5️⃣ 按钮五 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad5">按钮五</button>
</view>
.btn-grad5 {
background-image: linear-gradient(to right, #16A085 0%, #F4D03F  51%, #16A085  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;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

6️⃣ 按钮六 ▶️


🎃按钮样式:
在这里插入图片描述

📋按钮代码:

<view class="main">
<button class="btn-grad6">按钮六</button>
</view>
.btn-grad6 {
background-image: linear-gradient(to right, #D31027 0%, #EA384D  51%, #D31027  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;
}
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

🍉文末推荐 👨‍🏫


🎃活动介绍:
👉618,清华社 IT BOOK 多得图书活动开始啦!活动时间为 2023 年 6 月 7 日至 6 月 18 日,清华社为您精选多款高分好书,涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多个 IT 开发领域,适合不同层次的读者。全场 5 折,扫码领券更有优惠哦!快来京东点击链接 IT BOOK 多得(或扫描京东二维码)查看详情吧!

👉点击查看活动详情👈

🍟本期福利:
👉本期为大家带来的是清华社出版的《PyTorch深度学习简明实战》

🧀参与形式:
👉关注➕点赞➕收藏➕评论,每人最多评论三条,随机抽取3位小伙伴免费送书一本🍿

🧀抽奖时间:
⏰2023-06-16 18:00
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/625195.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数学建模】 非线性规划+二次规划

非线性规划概念和实例 如果目标函数或约束条件中包含非线性函数&#xff0c;就称这种规划问题为非线性规划问题。一般说来&#xff0c;解非线性规划要比解线性规划问题困难得多。而且&#xff0c;也不象线性规划有单纯形法这一通用方法&#xff0c;非线性规划目前还没有适于各…

大咖驾到:XR云新未来|弹性算力赋能可交互、沉浸式商业实践

活动背景 XR市场作为数字化经济的重要发展方向&#xff0c;成为各大企业竞相布局的焦点。技术的进步和应用场景的扩大&#xff0c;为企业抢占XR市场先机、实现商业化带来了巨大机遇&#xff0c;同时也带来了技术挑战和成本压力。如何在竞争激烈的市场中脱颖而出&#xff0c;成…

【每日挠头算法题(3)】字符串解码|数组中重复的数字

每日挠头算法题 一、字符串解码思路&#xff1a;栈具体代码如下&#xff1a; 二、数组中重复的数字思路1&#xff1a;计数法具体代码如下&#xff1a; 思路2&#xff1a;原地交换法具体代码如下&#xff1a; 总结 一、字符串解码 点我直达~ 思路&#xff1a;栈 这道题怎么看都…

python 爬虫某东网商品信息 | 没想到销量最高的是

哈喽大家好&#xff0c;我是咸鱼 好久没更新 python 爬虫相关的文章了&#xff0c;今天我们使用 selenium 模块来简单写个爬虫程序——爬取某东网商品信息 网址链接&#xff1a;https://www.jd.com/ 完整源码在文章最后 元素定位 我们需要找到网页上元素的位置信息&#x…

Spring内容

(195条消息) 超高频面试题系列之----Spring全家桶&#xff08;面试亲测&#xff09;_spring全家桶面试题_zyyn_未来可期的博客-CSDN博客 1、推断构造方法&#xff1a; &#xff08;1&#xff09;如果只有一个构造方法&#xff0c;没问题就用这个 &#xff08;2&#xff09;如…

Java学习路线(26)——XML与设计模式

一、XML &#xff08;一&#xff09;XML的概念&#xff1a; XML是可扩展标记语言&#xff08;Extensible Markup Language&#xff09;&#xff0c;一种数据表示形式&#xff0c;可以描述非常复杂的数据结构&#xff0c;常用于传输和存储数据。 &#xff08;二&#xff09;XM…

day50|动态规划11-买卖股票的最佳实际3-4(限制买卖次数的情况)

123.买卖股票的最佳时机III 确定递归函数&#xff0c;当前的每一个状态都由前一天决定。 以dp[i][1]和dp[i][2]为例讲解递归函数的含义&#xff1a; dp[i][1]max(dp[i-1][1],dp[i-1][0]-prices[i]) 含义&#xff1a; 第i天的股票第一天持有状态有两种&#xff0c;一种是前一…

电脑msvcr100.dll丢失的解决方法(一键修复方法)

msvcr100.dll是Microsoft Visual C运行时库的组成部分之一&#xff0c;它是一个重要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;可在Windows操作系统上运行。它包含了许多C/C语言程序库函数的实现&#xff0c;常常被用于支持和调用不同软件程序的运算&#xff0c…

POSTGRES、MYSQL插入数据的UPDATE_INSERT实践

POSTGRES: 1、创建表 create table tbl_user( id serial PRIMARY KEY, name varchar(256), addr varchar(256), age int, score int, fav varchar(256) ); 2、创建唯一约束 alter table tbl_user add constraint name_add_age_unique unique(name,addr,age); 3、首先插入两条数…

Ansible自定义静态资产以及常用模块

静态资产 文件文件&#xff0c;一个格式类似于INI的文件 默认情况下&#xff0c;Ansible的资产文件位于/etc/ansible/host&#xff0c;如果使用pip安装的则可能没有这文件&#xff0c;可以自己创建。 1、自定义资产 #自定义编写inventory.ini文件 1.1.1.1 2.2.2.2 3.3.3.[1:15]…

【C++】—— 模板介绍

前言&#xff1a; 在之前的学习中&#xff0c;我们已经对几个常见的STL库容器进行了详细的讲解&#xff0c;并且进行了模拟实现帮助大家立即。接下来&#xff0c;我们要介绍的就是关于 “模板” 的基本知识。 目录 前言 &#xff08;一&#xff09;非类型模板参数 1、基本介…

Splashtop 推出首款专门面向创作者和创意工作室的高性能远程软件

2023年5月3日 加利福尼亚州库比蒂诺 Splashtop 在简化随处办公的远程解决方案领域处于领先地位&#xff0c;公司今天宣布推出 Splashtop Business Access Performance&#xff0c;这是一款全新的远程访问解决方案&#xff0c;针对独立艺术家、游戏玩家、建筑与设计以及创意公司…

Opencv项目实战:基于dlib的疲劳检测

文章目录 一、项目简介二、算法原理三、环境配置3.1、dlib人脸检测器&#xff1a;dlib.get_frontal_face_detector()3.2、dlib关键点定位工具&#xff1a;shape_predictor_68_face_landmarks.dat 四、项目实战&#xff08;加载视频&#xff09;五、项目实战&#xff08;摄像头获…

软件测试猿和bug的爱恨情仇

对程序猿来说改bug可以位列开发过程中最讨厌的事之首了&#xff0c;这么讲应该没有人会反对吧&#xff1f;因为就连Java之父詹姆斯高斯林也很讨厌Bug。 另一方面对于测试猿来说工作职责就是尽可能多地找出bug&#xff0c;并确保其得以解决。所以被程序猿视为眼中钉肉中刺的bug可…

Doris半结构化数据分析(倒排索引使用)快速入门

1. 背景 Apache Doris2.0 基于Apache Doris向量化MPP引擎&#xff0c;增加了倒排索引和半结构化JSON数据支持&#xff0c;更好地满足日志存储、检索、分析需求。与基于ES的日志存储方案相比&#xff0c;有如下优势&#xff1a; 性价比提升&#xff1a;存储成本降低50%以上&am…

‍☠️stm32Cubemx欠采样原理讲解与实现 采集高频信号

&#x1f3f4;‍☠️STM32Cubemx ADCTIMDMA欠采样采集高频信号 本文主要讲解ADC借助欠采样采集高频信号&#xff0c;比如使用100k左右的采样率去采集1M的信号。 所需工具&#xff1a; 开发板:STM32F103RCT6STM32CubeMXIDE: Keil-MDK 相关文章&#xff1a; STM32HAL ADCTIM…

2核4G轻量服务器阿里云和腾讯云区别对比

阿里云轻量应用服务器2核4G4M带宽297.98元12个月&#xff0c;腾讯云轻量2核4G5M服务器168元一年&#xff0c;628元3年&#xff0c;2核4G轻量应用服务器阿里云和腾讯云怎么选择&#xff1f;哪个性能比较好&#xff1f;阿腾云分享轻量应用服务器2核4G配置阿里云和腾讯云CPU、带宽…

打破互联网思维,我们该如何思考?

在会议上&#xff0c;你是否流程规范讲到一半突然卡逻辑、测分会议疯狂输出周围却一脸问号&#xff1f;提交缺陷时&#xff0c;你又是否被告知看不懂&#xff0c;要求补充信息&#xff1f;受挫时捶胸顿足“表达可太太太重要了&#xff0c;难道我天生脑子转的就比别人慢&#xf…

基于深度学习的高精度红外行人车辆检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度红外行人车辆检测识别系统可用于日常生活中或野外来检测与定位红外行人车辆目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的红外行人车辆目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系…

围绕中国旅行商问题完成综合性实验报告 旅行商问题

题目&#xff1a;围绕中国旅行商问题完成综合性实验报告 旅行商问题&#xff08;TSP问题&#xff09;。 假设有一个旅行商人要拜访全国31个省会城市&#xff0c;它需要选择所要走的路径&#xff0c;路径的限制是每个城市只能拜访一次&#xff0c;而且最后要回到原来出发的城市。…