今日推荐💁♂️
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