Download button timer Downlaod

HTML

Download button timer Downlaod

1. Add this Library Before </head> tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>


2. Paste this code in Posts HTML View.
<style>
.button {
    background-color: DodgerBlue;
    border: none;
    color: white;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
   cursor: pointer;
}
  
  .button:hover {
  background-color: RoyalBlue;
}
  
.ddd{
    background-color: RoyalBlue;
    border: none;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
    color: white;
  cursor: pointer;
  }
  
  .ddd:hover {
  background-color: DodgerBlue;
}
</style>

<div style="text-align: center;">
<a class="button" href="https://yourdownloadlinkhere.com" id="download" target="_blank"><i class="fa fa-download"></i>Download Now</a>

<button class="ddd" id="btn"><i class="fa fa-download"></i>Download Here</button>

<script>
var downloadButton = document.getElementById("download");
var counter = 15;
var newElement = document.createElement("p");
newElement.innerHTML = "<b>15 seconds to Wait.</b>";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

function startDownload() {
    this.style.display = 'none';
    id = setInterval(function () {
        counter--;
        if (counter < 0) {
            newElement.parentNode.replaceChild(downloadButton, newElement);
            clearInterval(id);
        } else {
            newElement.innerHTML = +counter.toString() + " <b> seconds to Wait.</b>";
        }
    }, 1000);
};

var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script></div>