文章目录
今日推荐💁♂️
🏖️开头介绍 👨🏫
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; }
