<h1>Buttons Style : Demo 4</h1> <button class="download-btn" id="downloadBtn"> <i class="fas fa-download"></i> <span class="btn-text">Download</span> </button>

*{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #ff6b6b4d; text-align: center; font-family: Arial, Helvetica, sans-serif; } h1 { color: #ff3838; margin: 50px 15px; text-align: center; font-size: 30px; font-weight: 700; } .download-btn{ position: relative; background: linear-gradient(45deg, #ff4757, #ff3838, #ff6b6b); color: #fff; box-shadow: 0 0 20px #ff475780; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 32px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; min-width: 200px; min-height: 60px; text-transform: uppercase; letter-spacing: 1px; animation: fireFlicker 1.5s ease-in-out infinite alternate; border-radius: 12px; } .download-btn:hover{ transform: scale(1.05); animation: FireFlicker 0.5s ease-in-out infinite alternate; } @keyframes FireFlicker{ 0%{ box-shadow: 0 0 20px #ff475780; } 100%{ box-shadow: 0 0 40px #ff4757cc, 0 0 80px #ff6b6b4d; } }

const button = document.getElementById("downloadBtn"); const btnText = button.querySelector(".btn-text"); const icon = button.querySelector("i"); button.addEventListener("click", () => { let counter = 5; btnText.textContent = `Starting in ${counter}`; icon.className = "fas fa-hourglass-half"; const countdown = setInterval(() => { counter--; btnText.textContent = counter > 0 ? `Starting in ${counter}` : "Done!"; if (counter <= 0) { clearInterval(countdown); icon.className = "fas fa-check"; // Reset after 3 sec setTimeout(() => { btnText.textContent = "Download"; icon.className = "fas fa-download"; }, 3000); } }, 1000); });