为你的网站添上打赏按钮

无道 2019-08-27 0 条评论 前端相关 阅读268 手机阅读

前言

不少网站都有打赏功能,虽然肯定没多少人打赏,可也聊胜于无嘛。写了个打赏按钮,特此发出来看看。

纯CSS实现,没有Js。

当鼠标移上去,显示支fb和Wechat的二维码。

效果

打赏按钮效果

代码

CSS

* {
  padding: 0;
  margin: 0;
}

#grantBtn {
  position: relative;
  width: 100px;
  margin: 200px auto;
}

#grantBtn:hover .qrWrapper {
  display: block;
}

#grantBtn .btnWrapper {
  position: relative;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid #9b59b6;
  padding: 1px;
  cursor: pointer;
}

#grantBtn .btnWrapper button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  font-size: 20px;
  border-radius: 50%;
  outline: none;
  border: none;
  background-color: #9b59b6;
  color: #fff;
  cursor: pointer;
}

#grantBtn .qrWrapper {
  display: none;
  position: absolute;
  top: -278%;
  left: -115%;
  box-shadow: 0 1px 1px 1px #efefef;
  background-color: #fff;
  transition: 10s;
}

#grantBtn .qrWrapper .cet {
  position: absolute;
  bottom: 0;
  left: 50%;
}

#grantBtn .qrWrapper .qrcodeBox {
  display: flex;
  justify-content: center;
  border: 1px solid #ddd;
  padding: 0.3rem 0.3rem 0.5rem;
  z-index: 20;
}

#grantBtn .qrWrapper .qrcodeBox .item img {
  width: 150px;
  height: 150px;
}

#grantBtn .qrWrapper .qrcodeBox .item .text {
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  display: inherit;
}

为了展示方便,这里将#grantBtn 添加了margin,可根据自己页面需求自行修改。

HTML

<div id="grantBtn">
    <div class="btnWrapper">
        <button>赏</button>
    </div>
    <div class="qrWrapper">
        <div class="cet"></div>
        <div class="qrcodeBox">
            <div class="item">
                <img src="./Alipay.png" alt="">
                <span class="text">支付宝打赏</span>
            </div>
            <div class="item">
                <img src="./WeChatPay.png" alt="">
                <span class="text">微信打赏</span>
            </div>
        </div>
    </div>
</div>

将上面的img的src属性改为自己的支付宝,微信的二维码即可。

整体demo下载

文件下载

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-08-27 19:13
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~