文章目录
🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻
🏖️开头介绍 👨🏫
🎃内容介绍：
👉这次给大家带来六个我见到比较喜欢的按钮样式，接下来我将逐一介绍这六个按钮的样式和代码
📋整体展示：
🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻
1️⃣ 按钮一 ▶️
🎃按钮样式：
📋按钮代码：
<view class="main"> <button class="btn-grad1">按钮一</button> </view>
.btn-grad1 { 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-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, #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-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, #3CA55C 0%, #B5AC49 51%, #3CA55C 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, #E55D87 0%, #5FC3E4 51%, #E55D87 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, #F09819 0%, #EDDE5D 51%, #F09819 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, #FF512F 0%, #DD2476 51%, #FF512F 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; }
🧱🧱🧱🧱🧱🧱🧱🧱🧱🧱
