Download Button with Countdown Timer Using Html CSS Javascript | Free Source Codes

<style>
	.timer-button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		border-radius: 10px;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		-webkit-transition-duration: 0.4s;
		transition-duration: 0.4s;
	}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
	<center>
		<span id="countdown">You have to wait 15 seconds.</span></center>
	<br />
	<a class="timer-button" href="https://www.pixabin.com/" id="download_link" style="display: none;">Download Now</a>
	<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
</div>
</div>
<script type="application/javascript">
	(function() {
		var message = "%d seconds before download link appears";
		// seconds before download link becomes visible
		var count = 15;
		var countdown_element = document.getElementById("countdown");
		var download_link = document.getElementById("download_link");
		var timer = setInterval(function() {
			// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
			if (count) {
				// display text
				countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
				// decrease counter
				count--;
			} else {
				// stop timer
				clearInterval(timer);
				// hide countdown
				countdown_element.style.display = "none";
				// show download link
				download_link.style.display = "";
			}
		}, 1000);
	})();
</script>

<style>
  .button-2,Cnt-Timer{display:inline-flex;font-family:var(--fontB)}Cnt-Timer{font-size:13px;opacity:.8;align-items:center}.button-2{align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:#fffdfc;background:#000000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>
<center>
<div style="text-align: center;"><a class="button-2" id="Cnt-Timer-TD">Click here</a> </div>
  <div id="element-show" target="_blank">
 <a class="button-2" rel="nofollow" href="https://pexario.blogspot.com">Download Now</a>
  </div> </center>

    <script>var id,counter=10,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){--counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 60 60'style='width: 30px; height: auto;' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;</script>

<!-- css -->
<style>.container-3{position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}.starter-btn{position: relative; width: 260px; background-color: #40e7b6; color: #fff; padding: 18px 0; text-align: center; font-size: 1.3rem; font-weight: 400; border-radius: 5px; box-shadow: 0 5px 25px rgba(64, 232, 182, 0.5);}.starter-btn:hover{background-color: #06e1a1;}.countdown-3{margin-bottom: 20px; font-size: 1.5rem; font-weight: 700;}.countdown-3 span{color: #40e7b6; font-size: 1.5rem; font-weight: 800;}.waiting-text-3{font-size: 1.1rem; font-weight: 600; display: none;}.download-text-3{font-size: 1.1rem; font-weight: 600; display: none;}.download-text-3 .download-link-3{color: #40e7b6; font-weight: 800;}</style>


<!-- HTML -->
<div class="container-3"> <a class="starter-btn">Download Files</a> <div class="countdown-3"> </div><div class="waiting-text-3"> Please Wait.. </div><div class="download-text-3"> If the download did't start automatically, <a href="#" class="download-link-3"> Click Here </a> </div></div>

<!-- Javascript Function -->
<script>
  var timeleft=20;const downloadButton=document.querySelector(".starter-btn"),countdown=document.querySelector(".countdown-3"),waitText=document.querySelector(".waiting-text-3"),downloadText=document.querySelector(".download-text-3"),downloadLink=document.querySelector(".download-link-3");downloadButton.addEventListener("click",()=>{downloadButton.style.display="none",countdown.innerHTML="Download will begin automatically in <span>"+timeleft+" </span> seconds.";var t=setInterval(function n(){if(timeleft-=1,countdown.innerHTML="Download will begin automatically in <span>"+timeleft+" </span> seconds.",timeleft<=0){clearInterval(t),waitText.style.display="block";let e="https://www.pixabin.com";window.location.href=e,downloadLink.href=e,setTimeout(()=>{waitText.style.display="none",downloadText.style.display="block"},4e3)}},1e3)});
</script>