WmZilla - Webmaster and Marketplace

The Next Generation Webmaster and Trade Forum

Customizable Timer Download Button

YaBoiSmokey

New member

0

0%

Status

Offline

Posts

55

Likes

0

Rep

0

Bits

285

5

Months of Service

0%
Hello everyone, today I bring you a download button with a second timer for your page links. This code includes a 20-second timer that you can customize to your liking. The code is responsive and made with HTML, CSS, and JavaScript. I hope you enjoy it.

HTML:
```
<button id="download-button" data-link="https://www.your-link-here.com/download" target="_blank">Download</button>
<div id="timer"></div>
<div id="loading"></div>
```

CSS:
```
#download-button {}

#timer {}

#loading {}

@media screen and (max-width: 768px) {
#timer {}
}
```

JavaScript:
```
const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');

downloadBtn.addEventListener('click', function() {
let timeLeft = 20;
const countdown = setInterval(function() {
if (timeLeft === 0) {
clearInterval(countdown);
// Put your download logic here
} else {
timer.innerHTML = timeLeft + ' seconds remaining...';
timeLeft--;
}
}, 1000);
});
```

Note: The code may not open in a popup window, but a notification for the link will be activated.

Demo
 

249

6,622

6,642

Top