This Post is benifical to bloggers, website developers, website owners and students who are trying to attach an awesome download button with timer on their website project or site. In this post, i am going to share the source code of an amazing download button using HTML CSS and JavaScript. You can use this feature on your website and blog even if it is managed by Blogger or WordPress.
You can see here the download button having blue colour and a FONT-AWESOME icon attached on the rights side. You can edit the background colour of the button by changing some CSS code. If you click on the button, the button it will be hided and a text comes with counter in the same place of button. The counter is setted default from 10 seconds. If you want to change it, I have created a demo video :(don't forget to subscribe the channel to get new projects notification)
Files and folders for this project
You want to create the essential files such as index.html and style.css on a folder. The javascript will added within the html.
index.html
<!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">
<title>Download button with count-down</title>
<!-- css linking -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<button id="buttonDownload" onclick="download(10)">DOWNLOAD <i class="fa fa-download"></i></button>
<span id="counterbox" style="display:none;">Wait <span id="countView"></span> seconds. It will be downloaded automatically.</span>
</body>
<script>
function download(counter) {
urlDownload = "https://google.com";
document.getElementById("buttonDownload").style.display="none";
document.getElementById("counterbox").style.display = "block";
if (counter > 0) {
counter--;
setTimeout(function () { download(counter) }, 1000);
document.getElementById("countView").innerText= counter;
}
if (counter == 1) {
window.location.href = urlDownload;
document.getElementById("counterbox").innerText = "Successfully downloaded";
}
}
download(counter);
</script>
</html>
style.css
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#buttonDownload{
padding: 10px;
font-size: 20px;
font-weight: 600;
color: white;
background-color: rgb(56, 56, 221);
border-radius: 10px;
}
#counterbox{
color: rgb(44, 44, 44);
font-weight: 600;
font-size: 20px;
}
#countView{
color: blue;
font-weight: 800;
}
You might like:
- How to make an HTML-to-PDF converter? HTML to PDF - JS library
- Detect browser using JavaScript - with source code
- Download button with counter using HTML CSS and JavaScript
- How to create an Internet status viewer using JavaScript?
- Words counter with stylish dark UI using HTML CSS and JS
Comments