Animated Delete Button

<button id="deleteBtn"> <svg viewBox="0 0 24 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> <path class="paper" d="M10 3h5v6h-5z" fill="white" stroke="none"/> <path class="lid" d="M4 7h16M9 4h6"/> <path d="M6 10l1 13h10l1-13M10 13v7M14 13v7"/> </svg> <span>Delete</span> </button> body { margin: 0; height: 100vh; display: grid; place-items: center; background: #f5f7fb; font-family: Arial, sans-serif; } button { display: flex; align-items: center; gap: 12px; padding: 15px 28px; background: #f04452; color: white; border: 0; border-radius: 12px; font-size: 17px; cursor: pointer; box-shadow: 0 8px 20px #f0445230; } svg { width: 24px; height: 26px; overflow: visible; } .lid { transform-origin: 10px 6px; } .paper { opacity: 0; } .run .lid { animation: open .8s ease; } .run .paper { animation: fall .8s ease forwards; } @keyframes open { 35%, 70% { transform: rotate(-28deg) translateY(-2px); } } @keyframes fall { 0% { opacity: 1; transform: translateY(-16px); } 70% { opacity: 1; transform: translateY(8px) scale(.5); } 100% { opacity: 0; transform: translateY(15px) scale(.2); } } const btn = document.getElementById("deleteBtn"); btn.addEventListener("click", () => { if (btn.classList.contains("run")) return; btn.classList.add("run"); btn.querySelector("span").textContent = "Deleting..."; setTimeout(() => { btn.querySelector("span").textContent = "Deleted!"; btn.style.background = "#16a374"; }, 850); setTimeout(() => { btn.classList.remove("run"); btn.querySelector("span").textContent = "Delete"; btn.style.background = ""; }, 2200); });