Demo Video
CSS
<style>
.astbutton {
background: linear-gradient(99deg, rgba(2,0,36,1) 0%, rgba(0,255,196,1) 0%, rgba(242,242,242,0.9192270658263305) 100%);
border: none;
color: black;
font-family: system-ui;
font-size: 17px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 19px;
}
.infoblogger{
background: linear-gradient(99deg, rgba(2,0,36,1) 0%, rgba(0,255,196,1) 0%, rgba(242,242,242,0.9192270658263305) 100%);
border: none;
color: black;
font-family: system-ui;
font-size: 17px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 19px;
}
</style>JavaScript
<script type='text/javascript'>
//<![CDATA[
var downloadButton = document.getElementById("download");
var counter = 5;
var newElement = document.createElement("p");
newElement.innerHTML = "";
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() + " second.";
}
}, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
//]]>
</script>HTML
<div><br /></div>
<div style="text-align: center;"><a class="astbutton" href="####" id="download" target="_blank"> Download File </a><button class="infoblogger" id="btn"> Click Here </button>
</div>Also Read:
The Role of Women in Tech and Leadership
