Skip to content

Instantly share code, notes, and snippets.

@enlineaweb
Created March 13, 2023 19:57
Show Gist options
  • Save enlineaweb/0913c36509409c74da7a89ab6baaa7ac to your computer and use it in GitHub Desktop.
Save enlineaweb/0913c36509409c74da7a89ab6baaa7ac to your computer and use it in GitHub Desktop.
Download Button Animation
<button class="download-btn" id="downloadBtn">Download</button>
let downloadBtn = document.getElementById("downloadBtn");
downloadBtn.addEventListener("click", (event) => {
let btn = event.target;
btn.classList.add("clicked");
btn.textContent = "";
setTimeout(() => {
btn.classList.remove("clicked");
btn.textContent = "Download";
}, 3000);
});
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fefefe;
}
.download-btn {
position: relative;
font-size: 1.15rem;
width: 8em;
height: 3em;
font-weight: 700;
border: 0;
border-radius: 100vmax;
color: #fff;
background-color: rgb(29, 155, 240);
cursor: pointer;
transition: all 300ms ease-in;
}
.download-btn::before {
content: "Done";
position: absolute;
color: rgb(29, 165, 29);
left: 50%;
top: -2em;
transform: translateX(-50%);
opacity: 0;
}
.download-btn.clicked {
width: 20em;
height: 0.5em;
background-color: rgb(206, 224, 237);
animation: fill 1.5s ease-out 1 forwards;
animation-delay: 450ms;
}
.download-btn.clicked::before {
animation: show 250ms ease-in 1 forwards;
animation-delay: 2s;
}
@keyframes fill {
0% {
box-shadow: 0 0 0 rgb(29, 155, 240) inset;
}
95% {
box-shadow: 20em 0 0 rgb(29, 155, 240) inset;
}
100% {
box-shadow: 20em 0 0 rgb(29, 165, 29) inset;
}
}
@keyframes show {
100% {
opacity: 1;
}
}
@media (max-width: 576px) {
.download-btn {
font-size: 0.85rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment