简单的赞赏引导按钮 - wordpress 美化

只用 html 和 css 即可实现，简洁实用的功能，不影响加载速度，但足够一般情况下使用，这篇 wordpress 美化教程很适合哪些对插件不感兴趣的站长使用

最后更新于 2020-04-24

本页目录4 节

这次分享的赞赏只用 html 和 css 即可实现，简洁实用的功能，不影响加载速度，但足够一般情况下使用，这篇 WordPress 美化教程很适合哪些对插件不感兴趣的站长使用。

方法来源：详情

先看看效果：

1
<div class="reward">
2
    <div class="reward-button">赏<span class="reward-code">
3
    <span class="wechat-code"><img class="wechat-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg"><b>微信 - Npcink</b></span>
4
    <span class="alipay-code"><img class="alipay-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg"><b>支付宝 - Npcink</b></span>
5
    </span>
6
    </div>
7
  <p class="reward-notice"> 如果文章对您有帮助，欢迎打赏作者!</p>
8
</div>
9
<style type="text/css">
10
/*打赏*/
11
.reward {
12
padding: 0;
13
margin: -30px 0 30px 0;
14
}
15
.reward .reward-notice {
16
font-size: 14px;
17
line-height: 14px;
18
margin: 15px auto;
19
text-align: center
20
}
21
.reward .reward-button {
22
font-size: 33px;
23
line-height: 40px;
24
position: relative;
25
display: block;
26
width: 45px;
27
height: 45px;
28
margin: 0 auto;
29
padding: 0;
30
-webkit-user-select: none;
31
text-align: center;
32
vertical-align: middle;
33
color: #fff;
34
border: 1px solid #f1b60e;
35
border-radius: 50%;
36
background: #fccd60;
37
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
38
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
39
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
40
}
41
.reward .reward-code {
42
position: absolute;
43
top: -200px;
44
left: 50%;
45
display: none;
46
width: 326px;
47
height: 170px;
48
margin-left: -174px;
49
padding: 10px;
50
border: 1px solid #e6e6e6;
51
background: #05af4e;
52
}
53
.reward .reward-button:hover .reward-code {
54
display: block
55
}
56
.reward .reward-code span {
57
display: inline-block;
58
width: 150px;
59
height: 150px
60
}
61
.reward .reward-code span.alipay-code {
62
float: right
63
}
64
.reward .reward-code span.alipay-code a {
65
padding: 0
66
}
67
.reward .reward-code span.wechat-code {
68
float:left
69
}
70
.reward .reward-code img {
71
display: inline-block;
72
float: left;
73
width: 150px;
74
height: auto;
75
margin: 0 auto;
76
border: 0
77
}
78
.reward .reward-code b {
79
font-size: 14px;
80
line-height: 30px;
81
display: block;
82
margin: 0;
83
text-align: center;
84
color: #fff
85
}
86
.reward .reward-code b.notice {
87
line-height: 2rem;
88
margin-top: -1rem;
89
color: #999
90
}
91
.reward .reward-code:after,.reward .reward-code:before {
92
position: absolute;
93
content: '';
94
border: 10px solid transparent
95
}
96
.reward .reward-code:after {
97
bottom: -19px;
98
left: 50%;
99
margin-left: -10px;
100
border-top-color: #fff
101
}
102
.reward .reward-code:before {
103
bottom: -20px;
104
left: 50%;
105
margin-left: -10px;
106
border-top-color: #e6e6e6
107
}
108

109

110
</style>

代码如下：

1
<div class="reward">
2
    <div class="reward-button">赏<span class="reward-code">
3
    <span class="wechat-code"><img class="wechat-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg" ><b>微信 - Npcink</b></span>
4
    <span class="alipay-code"><img class="alipay-img" src="https://n.getimg.net/www/2020/04/11fd5e7918cead.jpg"><b>支付宝 - Npcink</b></span>
5
    </span>
6
    </div>
7
  <p class="reward-notice"> 如果文章对您有帮助，欢迎打赏作者!</p>
8
</div>
9
<style type="text/css">
10
/*打赏*/
11
.reward {
12
padding: 0;
13
margin: -30px 0 30px 0;
14
}
15
.reward .reward-notice {
16
font-size: 14px;
17
line-height: 14px;
18
margin: 15px auto;
19
text-align: center
20
}
21
.reward .reward-button {
22
font-size: 33px;
23
line-height: 40px;
24
position: relative;
25
display: block;
26
width: 45px;
27
height: 45px;
28
margin: 0 auto;
29
padding: 0;
30
-webkit-user-select: none;
31
text-align: center;
32
vertical-align: middle;
33
color: #fff;
34
border: 1px solid #f1b60e;
35
border-radius: 50%;
36
background: #fccd60;
37
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
38
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
39
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
40
}
41
.reward .reward-code {
42
position: absolute;
43
top: -200px;
44
left: 50%;
45
display: none;
46
width: 326px;
47
height: 170px;
48
margin-left: -174px;
49
padding: 10px;
50
border: 1px solid #e6e6e6;
51
background: #05af4e;
52
}
53
.reward .reward-button:hover .reward-code {
54
display: block
55
}
56
.reward .reward-code span {
57
display: inline-block;
58
width: 150px;
59
height: 150px
60
}
61
.reward .reward-code span.alipay-code {
62
float: right
63
}
64
.reward .reward-code span.alipay-code a {
65
padding: 0
66
}
67
.reward .reward-code span.wechat-code {
68
float:left
69
}
70
.reward .reward-code img {
71
display: inline-block;
72
float: left;
73
width: 150px;
74
height: auto;
75
margin: 0 auto;
76
border: 0
77
}
78
.reward .reward-code b {
79
font-size: 14px;
80
line-height: 30px;
81
display: block;
82
margin: 0;
83
text-align: center;
84
color: #fff
85
}
86
.reward .reward-code b.notice {
87
line-height: 2rem;
88
margin-top: -1rem;
89
color: #999
90
}
91
.reward .reward-code:after,.reward .reward-code:before {
92
position: absolute;
93
content: '';
94
border: 10px solid transparent
95
}
96
.reward .reward-code:after {
97
bottom: -19px;
98
left: 50%;
99
margin-left: -10px;
100
border-top-color: #fff
101
}
102
.reward .reward-code:before {
103
bottom: -20px;
104
left: 50%;
105
margin-left: -10px;
106
border-top-color: #e6e6e6
107
}
108

109

110
</style>

如何使用？

根据代码注释复制代码到自己需要的地方，例如古登堡的 HTML 区块或是小工具里面的“自定义 HTML”，将代码中的图片和问题替换为自己需要的，另外，记得看代码注释哦(。・∀・)ノ

我想用 WordPress 插件：

除了加一个简单的赞善功能，这篇 WordPress 美化教程还可以教你加一个炫酷的网站信息引导卡片，：

阅读偏好

工具

简单的赞赏引导按钮 - wordpress 美化

先看看效果：

代码如下：

如何使用？

我想用 WordPress 插件：

搜索