Download Button with Timer | CodingNepal /* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #E3F2FD; } .download-btn{ outline: none; border: none; color: #fff; display: flex; cursor: pointer; padding: 16px 25px; border-radius: 6px; align-items: center; white-space: nowrap; background: #4A98F7; transition: all 0.2s ease; } .download-btn:hover{ background: #2382f6; } .download-btn.timer{ color: #000; background: none; transition: none; font-size: 1.6rem; pointer-events: none; } .download-btn.timer b{ color: #4A98F7; padding: 0 8px; } .download-btn .icon{ font-size: 2rem; } .download-btn .text{ font-size: 1.5rem; padding-left: 10px; } /* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #E3F2FD; } .download-btn{ outline: none; border: none; color: #fff; display: flex; cursor: pointer; padding: 16px 25px; border-radius: 6px; align-items: center; white-space: nowrap; background: #4A98F7; transition: all 0.2s ease; } .download-btn:hover{ background: #2382f6; } .download-btn.timer{ color: #000; background: none; transition: none; font-size: 1.6rem; pointer-events: none; } .download-btn.timer b{ color: #4A98F7; padding: 0 8px; } .download-btn .icon{ font-size: 2rem; } .download-btn .text{ font-size: 1.5rem; padding-left: 10px; } vertical_align_bottom Download Files const downloadBtn = document.querySelector(".download-btn"); const fileLink = "https://drive.google.com/uc?export=download&id=1aYiaLn3YOjL-_o5QBCy7tU1epqA6gZoi"; const initTimer = () => { if(downloadBtn.classList.contains("disable-timer")) { return location.href = fileLink; } let timer = downloadBtn.dataset.timer; downloadBtn.classList.add("timer"); downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`; const initCounter = setInterval(() => { if(timer > 0) { timer--; return downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`; } clearInterval(initCounter); location.href = fileLink; downloadBtn.innerText = "Your file is downloading..."; setTimeout(() => { downloadBtn.classList.replace("timer", "disable-timer"); downloadBtn.innerHTML = `vertical_align_bottom Download Again`; }, 3000); }, 1000); } downloadBtn.addEventListener("click", initTimer);