Creating a download button with a countdown timer using HTML, CSS, and JavaScript is a useful technique for providing users with a sense of urgency and encouraging them to take action.
To create a download button with a countdown timer, you will need to use HTML to create the button and structure the page, CSS to style the button and timer, and JavaScript to add the countdown functionality.
To start, you will need to create an HTML button element and give it an id or class that can be used to select it with CSS and JavaScript. You can use the “onclick” attribute to specify a JavaScript function that will be executed when the button is clicked. Next, you can use CSS to style the button and timer.
For example, you can use the “background-color” and “color” properties to change the button’s appearance, and the “font-size” and “font-weight” properties to adjust the size and boldness of the timer text. Finally, you can use JavaScript to add the countdown functionality. This can be done using the “setInterval” function, which allows you to specify a function to be executed at regular intervals. You can use this function to decrement a counter variable and update the timer text with the current count.
Video Tutorial of How To Create Download Button With Countdown Timer Using HTML, CSS & JavaScript
Create an HTML, CSS, and JavaScript file to make a “Download Button” program. First, create an HTML document named “index.html” and paste the provided code into it. Remember to use the “.html” file extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
<title>Download Button with timer using HTML, CSS & JavaScript</title>
<!-- www.youtube.com/STech04 -->
</head>
<body>
<div class="btn-container">
<a class="download-btn" data-href="1VgJUqLM8TJY_VKK0XGKKvGpXcRlMhGe3">
<i class="fa-solid fa-cloud-arrow-down"></i> Download Now
</a>
<div class="countdown"></div>
<div class="pleaseWait-text">Please Wait...</div>
<div class="manualDownload-text">
Direct Link <a class="manualDownload-link">Click Here</a>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(224, 224, 224);
}
.download-btn{
position: relative;
font-size: 1.3em;
font-weight: 400;
background: #4285f4;
color: #fff;
padding: 18px;
border-radius: 30px;
text-decoration: none;
cursor: pointer;
transition: background 0.3s ease;
box-shadow: 0 5px 25px rgba(1, 1, 1, 0.26);
}
.download-btn:hover{
background: #116cff;
}
.download-btn i{
margin-right: 10px;
}
.countdown{
font-size: 1.3em;
font-weight: 700;
}
.countdown span{
font-size: 1.3em;
font-weight: 800;
color: #2e7cfa;
}
.pleaseWait-text{
font-size: 1.3em;
font-weight: 700;
display: none;
}
.manualDownload-text{
font-size: 1.3em;
font-weight: 600;
display: none;
}
.manualDownload-link{
font-size: 1.1em;
font-weight: 600;
color: #2e7cfa;
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const downloadBtns = document.querySelectorAll('.btn-container');
downloadBtns.forEach((btn)=>{
const downloadBtn = btn.querySelector('.download-btn');
const countdown = btn.querySelector('.countdown');
const pleaseWait_text = btn.querySelector('.pleaseWait-text');
const manualDownload_text = btn.querySelector('.manualDownload-text');
const manualDownload_link = btn.querySelector('.manualDownload-link');
const download_link = downloadBtn.getAttribute("data-href");
let timeleft = 12;
downloadBtn.addEventListener("click",()=>{
downloadBtn.style.display="none";
countdown.innerHTML = "Your download will start in <span>"+ timeleft +"</span> Seconds";
let timeInterval = setInterval(()=>{
timeleft -=1;
countdown.innerHTML = "Your download will start in <span>"+ timeleft +"</span> Seconds";
if (timeleft <= 0) {
clearInterval(timeInterval);
countdown.style.display = "none";
pleaseWait_text.style.display = "block";
// here i am using google drive file download link
let url = "https://drive.google.com/uc?export=download&id=";
let download_href = url + download_link; // enter download file link here
window.open(download_href);
manualDownload_link.href = download_href;
setTimeout(() => {
countdown.style.display = "none";
pleaseWait_text.style.display = "none";
manualDownload_text.style.display = "block";
}, 1000);
}
},1000)
})
})
Click on the following download button to download all source code files.
