文章写得不错？不如在网页上添加打赏按钮

知识就是财富，只要你分享的内容有价值，就有人愿意为它支付费用。在自媒体时代，知识变现比任何时候都来得容易。不一定通过付费阅读来赚取收益，添加打赏按钮也是流行的做法。

如何添加一个像本站文章页上一样，支持微信和支付宝的打赏按钮呢？

首先，在你想要放置这个按钮的位置添加代码：

/* 把二维码链接替换成自己的链接 */
<div class="reward">
    <div class="reward-button">赏<span class="reward-code"><span class="alipay-code"><img class="alipay-img" src="https://image.pcoic.com/wp-content/uploads/2019/11/alipay.jpg"><b>支付宝扫码打赏</b></span><span class="wechat-code"><img class="wechat-img" src="https://image.pcoic.com/wp-content/uploads/2019/11/wechat-pay.jpg"><b>微信打赏</b></span></span></div> 
    <p class="reward-notice">喜欢本文吗？请我喝杯雪碧吧~~</p>
</div>

不要忘记给按钮添加 CSS 样式：

.reward {
padding: 5px 0
}
.reward .reward-notice {
font-size: 14px;
line-height: 14px;
margin: 15px auto;
text-align: center
}
.reward .reward-button {
font-size: 28px;
line-height: 58px;
position: relative;
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
padding: 0;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
}
.reward .reward-code {
position: absolute;
top: -220px;
left: 50%;
display: none;
width: 350px;
height: 200px;
margin-left: -175px;
padding: 15px;
border: 1px solid #e6e6e6;
background: #fff;
box-shadow: 0 1px 1px 1px #efefef
}
.reward .reward-button:hover .reward-code {
display: block
}
.reward .reward-code span {
display: inline-block;
width: 150px;
height: 150px
}
.reward .reward-code span.alipay-code {
float: left
}
.reward .reward-code span.alipay-code a {
padding: 0
}
.reward .reward-code span.wechat-code {
float: right
}
.reward .reward-code img {
display: inline-block;
float: left;
width: 150px;
height: 150px;
margin: 0 auto;
border: 0
}
.reward .reward-code b {
font-size: 14px;
line-height: 26px;
display: block;
margin: 0;
text-align: center;
color: #666
}
.reward .reward-code b.notice {
line-height: 2rem;
margin-top: -1rem;
color: #999
}
.reward .reward-code:after,.reward .reward-code:before {
position: absolute;
content: '';
border: 10px solid transparent
}
.reward .reward-code:after {
bottom: -19px;
left: 50%;
margin-left: -10px;
border-top-color: #fff
}
.reward .reward-code:before {
bottom: -20px;
left: 50%;
margin-left: -10px;
border-top-color: #e6e6e6
}

本文代码来源于网络，因为时间久远，已经无法找到出处。如果读者知道出处，还请留言告知，我会补充引用地址。