最新公告

    欢迎您光临模板社,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们

网站资源下载代码 网站文章底部下载按钮代码分享给大家

作者 : 鹏仔 QQ344225443 本文共1825个字,预计阅读时间需要5分钟 发布时间: 2020-09-20 共103人阅读

Hello,大家好,我是Q站小编鹏仔,之前写了很多广告代码模板,包括引导页源码,相信很多人也在使用,本次给大家分享一个前段时间写的文章底部下载资源按钮代码给大家,几个月之前写的,写好以后忘记发布,今天想到就发布一下吧!

需要几个下载按钮,都可以,自行复制或删除a标签。

网站资源下载代码 网站文章底部下载按钮代码分享给大家插图

下方是对应css和html代码,自行复制放到需要展示的地方即可,不懂可联系鹏仔哥协助修改(免费协助)

<style>
    .tp-down-box{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    .down-btn {
      letter-spacing: 0.1em;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      line-height: 45px;
      width: 23%;
      max-width: 160px;
      text-decoration: none;
      text-transform: uppercase;
      margin: 5px;
    }
    .down-btn:hover {
      text-decoration: none;
    }
    .tp-down-btn {
      --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
      display: var(--uismLinkDisplay);
      color: #000;
      border: 2px solid #000;
      border-radius: 5px;
      position: relative;
      transition-duration: 0.4s;
      overflow: hidden;
      text-align: center;
    }
    .tp-down-btn::before,
    .tp-down-btn span{
      margin: 0 auto;
      transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
      transition-duration: 0.4s;
    }
    .tp-down-btn:hover{
      background-color: #000;
    }
    .tp-down-btn:hover span{
      -webkit-transform: translateY(-400%) scale(-0.1,20);
      transform: translateY(-400%) scale(-0.1,20);
    }
    .tp-down-btn::before{
      content: attr(data-sm-link-text);
      color: #FFF;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      -webkit-transform: translateY(500%) scale(-0.1,20);
      transform: translateY(500%) scale(-0.1,20);
    }
    .tp-down-btn:hover::before{
        letter-spacing: 0.05em;
        -webkit-transform: translateY(0) scale(1,1);
        transform: translateY(0) scale(1,1);
    }
    @media screen and (max-width: 1198px){
      .down-btn{
          width: 45%;
      }
    }
</style>
<div class="tp-down-box">
  <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>蓝奏网盘</span></a>
  <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>天翼网盘</span></a>
  <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>百度网盘</span></a>
	<a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>百变鹏仔</span></a>
</div>
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!254905527@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
模板社 » 网站资源下载代码 网站文章底部下载按钮代码分享给大家

发表评论