觅风论坛

标题: 前端网站下载按钮代码源码（自定义下载按钮代码） [打印本页]
作者: MerlePalaf    时间: 2023-10-10 10:32
标题: 前端网站下载按钮代码源码（自定义下载按钮代码）
需要几个下载按钮，都可以，自行复制或删除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
下载地址：



作者: 123456    时间: 2023-10-10 11:50
6666666666
作者: IUYUYUUYUY    时间: 2023-10-10 13:09
想学唉，可惜现在的我啥都不会
作者: hy507669673    时间: 2023-10-10 14:28
支持，赞
作者: 何海银    时间: 2023-10-10 15:47
期待中......
作者: 张杰    时间: 2023-10-10 17:06
很不错的哦，支持，加油
作者: 海绵老爹    时间: 2023-10-10 20:47
学习中，看看代码啥情况
作者: 1791703110    时间: 2023-10-11 00:28
支持，赞
作者: SDS    时间: 2023-10-11 04:09
学习了，这就去试试
作者: 小麦555    时间: 2023-10-11 07:50
期待中......
作者: 找找找    时间: 2023-10-11 11:30
藕是来打酱油滴...
作者: 542134120.    时间: 2023-10-11 13:22
提示: 作者被禁止或删除 内容自动屏蔽
作者: lmx0618    时间: 2023-10-11 15:14
这个资源我一直想要
作者: hy507669673    时间: 2023-10-11 17:06
人设人阿松大
作者: gwm231    时间: 2023-10-11 18:58
不错哦  喜欢 嘿嘿
作者: gwm231    时间: 2023-10-11 20:50
抢楼了，前排第一次啊
作者: a32d321as    时间: 2023-10-11 20:53
阿斯蒂芬撒反对
作者: 骚年    时间: 2023-10-11 20:56
好东西，一定要进行学习
作者: li123    时间: 2023-10-11 20:59
非常不错，感谢分享！
作者: 刘小凯    时间: 2023-10-11 21:02
我表示压力很大
作者: 476572199    时间: 2023-10-11 21:05
感觉不错
作者: 1378409920    时间: 2023-10-12 10:03
多上传一点源码
作者: csw96781    时间: 2023-10-12 23:00
撒大苏打阿斯顿阿斯顿
作者: 神话宝宝    时间: 2023-10-13 11:58
还不错觅风论坛欢迎你
作者: sdajhdjannda    时间: 2023-10-14 00:56
这就是传说中的好资源吗？赶紧看看去！
作者: sxy19931021    时间: 2023-10-14 13:53
提示: 作者被禁止或删除 内容自动屏蔽
作者: 5555    时间: 2023-10-14 19:13
这个资源我一直想要
作者: a32d321as    时间: 2023-10-15 00:33
学习了！！！！
作者: yu2353173832    时间: 2023-10-15 05:53
支持，赞
作者: wz19981007    时间: 2023-10-15 11:13
不错不错 支持下
作者: 呵呵    时间: 2023-10-15 16:33
感觉不错
作者: lllll557    时间: 2023-10-15 17:54
感谢感谢分享
作者: 物语    时间: 2023-10-15 19:14
我要下载试试，我要下载试试...
作者: 小粑    时间: 2023-10-15 20:35
的法国风格化规范化
作者: 小粑    时间: 2023-10-15 21:56
这就是传说中的好资源吗？赶紧看看去！
作者: 封偌丶    时间: 2023-10-15 23:16
不错不错 支持下
作者: 霸王喝粥    时间: 2023-10-15 23:57
9999999999999999
作者: q12138    时间: 2023-10-16 00:38
觅风论坛需要你
作者: 李海低    时间: 2023-10-16 01:19
我表示压力很大
作者: 好吧你又赢了    时间: 2023-10-16 02:00
看帖子的要发表下看法
作者: 李海低    时间: 2023-10-16 02:41
前来围观，LZ好样的！
作者: 小白    时间: 2023-10-16 05:29
谢谢大人的分享
作者: 565562216    时间: 2023-10-16 08:16
人设人阿松大
作者: 的含税单价    时间: 2023-10-16 11:04
11111111111111111111111111
作者: 幻之灭    时间: 2023-10-16 13:52
666学习了！！
作者: 565562216    时间: 2023-10-16 16:39
很不错的哦，支持，加油
作者: 幕后煮屎人    时间: 2023-10-18 03:25
我要下载试试，我要下载试试...
作者: 大蒜先生    时间: 2023-10-19 14:11
感谢分享LOL
作者: 幕后煮屎人    时间: 2023-10-21 00:56
看看看看看看看看看看看看
作者: 桃子    时间: 2023-10-22 11:42
很给力。。。。很喜欢
作者: 幕后煮屎人    时间: 2023-10-23 22:28
赞一个!
作者: 图样图森破丶    时间: 2023-10-24 02:09
谢谢分享，下载测试
作者: xiaojian    时间: 2023-10-24 05:50
看看，到底好不好，想学学看看
作者: 小粑    时间: 2023-10-24 09:31
这就是传说中的好资源吗？赶紧看看去！
作者: 图个简单    时间: 2023-10-24 13:12
不错！顶LZ
作者: a1031399528a    时间: 2023-10-24 16:53
支持！！！！前排！！！！



欢迎光临 觅风论坛 (https://www.eyyba.com/) Powered by Discuz! X3.4