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>
Post a Comment
Post a Comment