请选择 进入手机版 | 继续访问电脑版

爱Q粉丝网

搜索
查看: 563|回复: 2
收起左侧

[JS特效] 分享一款动态个性下载按钮JS代码

[复制链接]

197

主题

202

帖子

777

积分

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

积分
777

灌水之王优秀版主荣誉管理论坛元老

发表于 2020-5-18 03:46:31 | 显示全部楼层 |阅读模式

分享一款动态个性下载按钮JS代码
  1. <!-- 爱Q粉丝网www.iqfsw.com 在线js特效 -->
  2. <STYLE type="text/css">#wrap{margin:20px auto;text-align:center;}#wrap br{display:none;}.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s;}.btn-slide2{border:2px solid #efa666;}.btn-slide:hover{background-color:#0099cc;}.btn-slide2:hover{background-color:#efa666;}.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{right:100%;margin-right:-45px;background-color:#fdfdfd;color:#0099cc;}.btn-slide2:hover span.circle2{color:#efa666;}.btn-slide:hover span.title,.btn-slide2:hover span.title2{right:40px;opacity:0;}.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;right:40px;}.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:right;margin:5px;line-height:42px;height:40px;width:40px;top:0;right:0;transition:.5s;border-radius:50%;}.btn-slide2 span.circle2{background-color:#efa666;}.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;right:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s;}.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;right:80px;}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{right:80px;opacity:0;}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff;}</style>
  3. <div id="wrap">
  4.         <a href="http://www.iqfsw.com" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">点击下载①</span> <span class="title-hover">爱Q粉丝网www.iqfsw.com</span> </a>
  5.         <div id="wrap">
  6.                 <a href="http://www.iqfsw.com" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">点击下载②</span> <span class="title-hover2">  爱Q粉丝网www.iqfsw.com</span></a>
  7.         </div>
  8. </div><!-- 爱Q粉丝网www.iqfsw.com 在线js特效 -->
复制代码


回复

使用道具 举报

0

主题

7

帖子

16

积分

新手上路

Rank: 1

积分
16
发表于 2020-5-21 11:21:03 | 显示全部楼层
分享一款动态个性下载按钮JS代码
回复

使用道具 举报

0

主题

7

帖子

16

积分

新手上路

Rank: 1

积分
16
发表于 2020-5-21 11:21:30 | 显示全部楼层
少时诵诗书所所三生三世所
回复

使用道具 举报

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

本版积分规则

快速回复 返回顶部 返回列表