导读
易语言5.6完美版,可静态编译,绿色无后门

学习易语言 讲究的是系统,如果你正在四处闲逛,你懂的永远是皮毛! 觅风论坛正在为每个困惑的对易语言 详细

[源码] 前端网站下载按钮代码源码(自定义下载按钮代码)

[复制链接]

微信扫一扫 分享朋友圈

MerlePalaf 发表于 2023-10-10 10:32:03 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

马上注册,结交更多易友,享用更多功能,让你轻松玩转觅风论坛。

您需要 登录 才可以下载或查看,没有账号?立即注册

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


下方是对应css和html代码,自行复制放到需要展示的地方即可

  1. <style>    .tp-down-box{
  2.       width: 100%;
  3.       display: flex;
  4.       align-items: center;
  5.       justify-content: center;
  6.       flex-wrap: wrap;
  7.     }
  8.     .down-btn {
  9.       letter-spacing: 0.1em;
  10.       cursor: pointer;
  11.       font-size: 14px;
  12.       font-weight: 700;
  13.       line-height: 45px;
  14.       width: 23%;
  15.       max-width: 160px;
  16.       text-decoration: none;
  17.       text-transform: uppercase;
  18.       margin: 5px;
  19.     }
  20.     .down-btn:hover {
  21.       text-decoration: none;
  22.     }
  23.     .tp-down-btn {
  24.       --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
  25.       display: var(--uismLinkDisplay);
  26.       color: #000;
  27.       border: 2px solid #000;
  28.       border-radius: 5px;
  29.       position: relative;
  30.       transition-duration: 0.4s;
  31.       overflow: hidden;
  32.       text-align: center;
  33.     }
  34.     .tp-down-btn::before,    .tp-down-btn span{
  35.       margin: 0 auto;
  36.       transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  37.       transition-duration: 0.4s;
  38.     }
  39.     .tp-down-btn:hover{
  40.       background-color: #000;
  41.     }
  42.     .tp-down-btn:hover span{
  43.       -webkit-transform: translateY(-400%) scale(-0.1,20);
  44.       transform: translateY(-400%) scale(-0.1,20);
  45.     }
  46.     .tp-down-btn::before{
  47.       content: attr(data-sm-link-text);
  48.       color: #FFF;
  49.       position: absolute;
  50.       left: 0;
  51.       right: 0;
  52.       margin: auto;
  53.       -webkit-transform: translateY(500%) scale(-0.1,20);
  54.       transform: translateY(500%) scale(-0.1,20);
  55.     }
  56.     .tp-down-btn:hover::before{
  57.         letter-spacing: 0.05em;
  58.         -webkit-transform: translateY(0) scale(1,1);
  59.         transform: translateY(0) scale(1,1);
  60.     }
  61.     @media screen and (max-width: 1198px){
  62.       .down-btn{
  63.           width: 45%;
  64.       }
  65.     }</style>
复制代码



网站下载按钮代码

  1. <div class="tp-down-box">
  2.   <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>蓝奏网盘</span></a>
  3.   <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>天翼网盘</span></a>
  4.   <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>百度网盘</span></a>
  5.         <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>uuzzw</span></a>
  6. </div>
复制代码
之前写了很多广告代码模板,包括引导页源码,相信很多人也在使用,本次给大家分享一个前段时间写的文章底部下载资源按钮代码给大家,几个月之前写的,写好以后忘记发布,今天想到就发布一下吧!

QQ截图20231010104156.jpg
下载地址:



游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

精彩评论55

123456 发表于 2023-10-10 11:50:59 | 显示全部楼层
6666666666
回复 支持 反对

使用道具 举报

IUYUYUUYUY 发表于 2023-10-10 13:09:55 | 显示全部楼层
想学唉,可惜现在的我啥都不会
回复 支持 反对

使用道具 举报

hy507669673 发表于 2023-10-10 14:28:50 | 显示全部楼层
支持,赞
回复 支持 反对

使用道具 举报

何海银 发表于 2023-10-10 15:47:46 | 显示全部楼层
期待中......
回复 支持 反对

使用道具 举报

张杰 发表于 2023-10-10 17:06:41 | 显示全部楼层
很不错的哦,支持,加油
回复 支持 反对

使用道具 举报

海绵老爹 发表于 2023-10-10 20:47:32 | 显示全部楼层
学习中,看看代码啥情况
回复 支持 反对

使用道具 举报

1791703110 发表于 2023-10-11 00:28:23 | 显示全部楼层
支持,赞
回复 支持 反对

使用道具 举报

SDS 发表于 2023-10-11 04:09:14 | 显示全部楼层
学习了,这就去试试
回复 支持 反对

使用道具 举报

小麦555 发表于 2023-10-11 07:50:05 | 显示全部楼层
期待中......
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注我们:觅风论坛与你快乐分享

收藏本站

用心服务做个非盈利公益编程网站

www.eyyba.com

服务人:觅风论坛

Email:eyyba@foxmail.com

Powered by WWW.EYYBA.COM X3.4© 2001-2023 Inc.   版权所有   

觅风论坛  疆ICP备15020893号-1