Tìm kiếm trên Google thì có rất nhiều trang chia sẻ cách tạo Button Demo và Download rất nhiều nhưng hầu như không có ai chia sẻ Button Download có đếm số (countdown) cả. Nay mình lang thang tìm được Button Download đẹp này nên share lại cho các bạn tiện sử dụng.
Cái hay của Button này là khi các bạn click vào nút TẢI VỀ là nó sẽ hiển thị đếm số ngược (countdown) và tự động chuyển đến link download của bạn khi hết thời gian đếm số.
Khồng dài dòng nữa bây giờ mình tiến hành chia sẻ code cho các bạn luôn
Button Download Countdown Responsive Blogspot
Code CSS
/* Download Counter Box */#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0090b8;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:linear-gradient(to bottom right, DarkCyan, MediumSpringGreen);color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
Code Javascript
<script type="text/javascript">//<![CDATA[function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=6,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}//]]></script>
Code HTML chèn vào bài viết
<div class="batas-downx"><div class="dalam-downx"><div class="bungkus-info"><div class="file-info"><i aria-hidden="true" class="fas fa-file-download"></i><b>File Download</b> <i aria-hidden="true" class="fas fa-chevron-circle-right"></i></div><button id="btnx" onclick="generate()" target="_blank"><i aria-hidden="true" class="fa fa-cloud-download"></i> <b>TẢI VỀ</b></button> <a href="link-download" id="downloadx" style="display: none;" target="_blank">Downloading</a><div style="text-align: left;">File Size: x MB. No ADS</div></div></div></div>
0 Nhận xét
Đăng nhận xét