Custom Downlaod Button no :1
<div class="dl-container">
<button id="dlBtn" class="dl-button">
<span id="spinnerIcon" class="spinner-icon">⏳</span>
<span class="btn-text">Download File</span>
</button>
<span id="dlTimer" class="dl-timer"></span>
</div>
<style>
.dl-container {
text-align: center;
padding: 30px;
}
.dl-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
font-size: 18px;
background: linear-gradient(135deg, #ff7e00, #ffb347); /* Orange gradient */
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.spinner-icon {
display: inline-block;
font-size: 18px;
transition: transform 0.3s ease;
}
.spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dl-timer {
display: inline-block;
font-size: 16px;
color: #333;
margin-left: 15px;
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.dl-button:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #ffb347, #ff7e00); /* Reversed on hover */
}
}
@media (hover: none) and (pointer: coarse) {
.dl-button {
transform: scale(1.05);
background: linear-gradient(135deg, #ffb347, #ff7e00);
}
}
@media (max-width: 500px) {
.dl-button {
font-size: 16px;
padding: 12px 24px;
}
.dl-timer {
font-size: 14px;
margin-left: 10px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("dlBtn");
const spinner = document.getElementById("spinnerIcon");
const btnText = btn.querySelector(".btn-text");
const timerEl = document.getElementById("dlTimer");
btn.addEventListener("click", () => {
const fileURL = "https://example.com/yourfile.pdf"; // Replace with your file URL
let seconds = 5;
btn.disabled = true;
spinner.classList.add("spinning");
btnText.textContent = "Preparing...";
timerEl.textContent = `Downloading in ${seconds}s`;
const countdown = setInterval(() => {
seconds--;
timerEl.textContent = `Downloading in ${seconds}s`;
if (seconds <= 0) {
clearInterval(countdown);
timerEl.textContent = "";
const link = document.createElement("a");
link.href = fileURL;
link.download = "";
link.rel = "noopener";
document.body.appendChild(link);
link.click();
link.remove();
// Reset button
setTimeout(() => {
spinner.classList.remove("spinning");
btn.disabled = false;
btnText.textContent = "Download File";
}, 500);
}
}, 1000);
});
});
</script>
Custom Downlaod Button no :2
0%
<div class="confetti-container">
<button id="confettiBtn" class="confetti-button">
🎉 Download File
</button>
<div id="confettiProgressWrapper">
<div id="confettiProgress">0%</div>
</div>
<canvas id="confetti-canvas"></canvas>
</div>
<style>
.confetti-container {
text-align: center;
padding: 40px;
position: relative;
}
.confetti-button {
padding: 14px 30px;
font-size: 18px;
background: linear-gradient(135deg, #ff7e00, #ffb347);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.confetti-button:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #ffb347, #ff7e00);
}
}
@media (hover: none) and (pointer: coarse) {
.confetti-button {
transform: scale(1.05);
background: linear-gradient(135deg, #ffb347, #ff7e00);
}
}
#confettiProgressWrapper {
margin-top: 25px;
display: none;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}
#confettiProgress {
width: 0%;
height: 20px;
background: linear-gradient(to right, #ff7e00, #ffb347);
transition: width 0.1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
}
#confetti-canvas {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("confettiBtn");
const progressBar = document.getElementById("confettiProgress");
const wrapper = document.getElementById("confettiProgressWrapper");
const canvas = document.getElementById("confetti-canvas");
btn.addEventListener("click", () => {
const fileURL = "https://example.com/yourfile.pdf"; // Replace with your file URL
wrapper.style.display = "block";
let width = 0;
const progressInterval = setInterval(() => {
width++;
progressBar.style.width = width + "%";
progressBar.textContent = width + "%";
if (width >= 100) {
clearInterval(progressInterval);
// 🎉 Confetti Blast
confetti.create(canvas, { resize: true })({
particleCount: 120,
spread: 80,
origin: { y: 0.6 }
});
// Trigger file download
const link = document.createElement("a");
link.href = fileURL;
link.download = "";
link.rel = "noopener";
document.body.appendChild(link);
link.click();
link.remove();
// Reset progress after a short delay
setTimeout(() => {
wrapper.style.display = "none";
progressBar.style.width = "0%";
progressBar.textContent = "0%";
}, 1500);
}
}, 50); // 5 seconds total (50ms * 100)
});
});
</script>
Custom Downlaod Button no :3
0%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pulse Glow Download Button</title>
<style>
body {
background: #f5f5f5;
font-family: 'Segoe UI', sans-serif;
text-align: center;
padding: 60px 20px;
color: #333;
}
#downloadSection {
display: flex;
flex-direction: column;
align-items: center;
}
#pulseDownloadBtn {
padding: 14px 36px;
font-size: 18px;
font-weight: bold;
color: white;
background: linear-gradient(135deg, #7b2ff7, #f107a3);
border: none;
border-radius: 50px;
cursor: pointer;
outline: none;
animation: pulseGlow 1.5s infinite;
box-shadow: 0 0 20px rgba(123, 47, 247, 0.5);
transition: transform 0.2s ease;
}
#pulseDownloadBtn:active {
transform: scale(0.95);
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 0 rgba(123, 47, 247, 0.6);
}
70% {
box-shadow: 0 0 0 20px rgba(123, 47, 247, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(123, 47, 247, 0);
}
}
#progressWrapper {
width: 100%;
max-width: 400px;
margin-top: 25px;
height: 20px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
display: none;
}
#progressFill {
height: 100%;
width: 0%;
background: linear-gradient(to right, #7b2ff7, #f107a3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
transition: width 0.1s ease-in-out;
}
@media (max-width: 600px) {
#pulseDownloadBtn {
padding: 12px 28px;
font-size: 16px;
}
#progressWrapper {
max-width: 280px;
}
}
@media (max-width: 400px) {
#pulseDownloadBtn {
padding: 10px 20px;
font-size: 14px;
}
#progressWrapper {
max-width: 220px;
}
}
</style>
</head>
<body>
<div id="downloadSection">
<button id="pulseDownloadBtn">⬇️ Download File</button>
<div id="progressWrapper">
<div id="progressFill">0%</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const downloadBtn = document.getElementById("pulseDownloadBtn");
const progressWrapper = document.getElementById("progressWrapper");
const progressFill = document.getElementById("progressFill");
downloadBtn.addEventListener("click", function () {
const fileURL = "https://example.com/yourfile.pdf"; // Replace with real file URL
progressWrapper.style.display = "block";
let progress = 0;
const interval = setInterval(() => {
progress += 2;
progressFill.style.width = progress + "%";
progressFill.textContent = progress + "%";
if (progress >= 100) {
clearInterval(interval);
setTimeout(() => {
const link = document.createElement("a");
link.href = fileURL;
link.download = "";
link.rel = "noopener";
document.body.appendChild(link);
link.click();
link.remove();
}, 200);
}
}, 100); // 5 seconds (50 x 100ms)
});
});
</script>
</body>
</html>
Custom Downlaod Button no :4
<div id="downloadContainer" style="text-align: center; padding: 40px; position: relative; z-index: 10;"> <!-- Line 1 -->
<button id="downloadBtn" style="background: linear-gradient(135deg, #8b5cf6, #facc15); color: #fff; padding: 16px 40px; font-size: 18px; font-weight: bold; border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 10px rgba(139, 92, 246, 0.5); transition: box-shadow 0.3s ease-out;"> <!-- Line 2 -->
⬇️ Download File <!-- Line 3 -->
</button> <!-- Line 4 -->
<div id="progressBarContainer" style="width: 100%; max-width: 200px; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; margin: 10px auto; overflow: hidden; display: none;"> <!-- Line 5 -->
<div id="progressBar" style="width: 0; height: 100%; background: linear-gradient(135deg, #8b5cf6, #facc15); box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);"></div> <!-- Line 6 -->
</div> <!-- Line 7 -->
</div> <!-- Line 8 -->
<style> <!-- Line 9 -->
@keyframes hoverFloat { /* Line 10 */
0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 10px rgba(139, 92, 246, 0.5); } /* Line 11 */
50% { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 0 15px rgba(139, 92, 246, 0.7); } /* Line 12 */
} /* Line 13 */
@-webkit-keyframes hoverFloat { /* Line 14 */
0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 10px rgba(139, 92, 246, 0.5); } /* Line 15 */
50% { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 0 15px rgba(139, 92, 246, 0.7); } /* Line 16 */
} /* Line 17 */
@keyframes fillProgress { /* Line 18 */
0% { width: 0; } /* Line 19 */
100% { width: 100%; } /* Line 20 */
} /* Line 21 */
@-webkit-keyframes fillProgress { /* Line 22 */
0% { width: 0; } /* Line 23 */
100% { width: 100%; } /* Line 24 */
} /* Line 25 */
#downloadContainer #downloadBtn { /* Line 26 */
animation: hoverFloat 3s ease-in-out infinite !important; /* Line 27 */
-webkit-animation: hoverFloat 3s ease-in-out infinite !important; /* Line 28 */
} /* Line 29 */
#progressBar.active { /* Line 30 */
animation: fillProgress 2s linear forwards !important; /* Line 31 */
-webkit-animation: fillProgress 2s linear forwards !important; /* Line 32 */
} /* Line 33 */
</style> <!-- Line 34 -->
<script> <!-- Line 35 -->
document.addEventListener("DOMContentLoaded", function () { /* Line 36 */
const btn = document.getElementById("downloadBtn"); /* Line 37 */
const progressBarContainer = document.getElementById("progressBarContainer"); /* Line 38 */
const progressBar = document.getElementById("progressBar"); /* Line 39 */
// Download action with 2-second delay and progress bar /* Line 40 */
btn.addEventListener("click", () => { /* Line 41 */
btn.disabled = true; /* Line 42 */
progressBarContainer.style.display = "block"; /* Line 43 */
progressBar.classList.add("active"); /* Line 44 */
setTimeout(() => { /* Line 45 */
const fileURL = "https://yoursite.com/wp-content/uploads/2025/05/yourfile.pdf"; // Swap your file URL /* Line 46 */
const link = document.createElement("a"); /* Line 47 */
link.href = fileURL; /* Line 48 */
link.download = ""; /* Line 49 */
link.rel = "noopener"; /* Line 50 */
document.body.appendChild(link); /* Line 51 */
link.click(); /* Line 52 */
link.remove(); /* Line 53 */
progressBar.classList.remove("active"); /* Line 54 */
progressBarContainer.style.display = "none"; /* Line 55 */
progressBar.style.width = "0"; /* Line 56 */
btn.disabled = false; /* Line 57 */
}, 2000); /* Line 58 */
}); /* Line 59 */
}); /* Line 60 */
</script> <!-- Line 61 -->
