download button final code

.note {
background: #f7faff;
border-left: 4px solid #4a98f7;
padding: 12px 15px;
border-radius: 8px;
font-family: “Poppins”, sans-serif;
color: #333;
margin-bottom: 15px;
}

/* ——– Premium Button ——– */
.download-Timer-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #0072ff, #00c6ff);
border: none;
color: #fff;
font-family: “Poppins”, sans-serif;
font-size: 1rem;
font-weight: 500;
padding: 12px 20px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
}

.download-Timer-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 114, 255, 0.4);
background: linear-gradient(135deg, #005bea, #00c6ff);
}

.download-Timer-btn svg {
width: 20px;
height: 20px;
fill: #fff;
transition: transform 0.3s ease;
}

.download-Timer-btn:hover svg {
transform: scale(1.1);
}

/* Timer Mode */
.download-Timer-btn.timer {
background: #f1f3f6;
color: #333;
cursor: not-allowed;
box-shadow: none;
font-weight: 500;
border: 1px solid #dcdfe6;
}

.download-Timer-btn.timer b {
color: #0072ff;
}

/* Hidden class */
.hidden {
display: none;
}

/* Responsive Centering */
.button-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}

const timerBtn = document.getElementById(“timerBtn”);
const realDownloadBtn = document.getElementById(“realDownloadBtn”);

const initTimer = () => {
if (timerBtn.classList.contains(“disable-timer”)) return;

let timer = timerBtn.dataset.timer;
timerBtn.classList.add(“timer”);
timerBtn.innerHTML = `Wait for ${timer} seconds`;

const initCounter = setInterval(() => {
if (timer > 0) {
timer–;
timerBtn.innerHTML = `Wait for ${timer} seconds`;
} else {
clearInterval(initCounter);
timerBtn.innerHTML = “Your download is ready!”;
timerBtn.classList.add(“disable-timer”);

// Show real download button
realDownloadBtn.classList.remove(“hidden”);
}
}, 1000);
};

timerBtn.addEventListener(“click”, initTimer);