Download Button Animation Using HTML,CSS & JavaScript
.png "Download Button Css | Button Html Css Download | Download Button Animation")
Welcome to the Codewithrandom blog. In this blog, we learn how we create a Download Button Animation. We use HTML, CSS, and JavaScript for this Download Button Animation.
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Download Button Animation.
HTML Code For Download Button Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Download Button Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container"> <a href="" class="button">
<ul>
<li>Download</li>
<li>Downloading</li>
<li>Open File</li>
</ul>
<div> <svg viewBox="0 0 24 24"></svg> </div>
</a> <a href="" class="button dark-single">
<div> <svg viewBox="0 0 24 24"></svg> </div>
</a>
<div></div> <a href="" class="button white-single">
<div> <svg viewBox="0 0 24 24"></svg> </div>
</a> <a href="" class="button dark">
<ul>
<li>Download</li>
<li>Downloading</li>
<li>Open File</li>
</ul>
<div> <svg viewBox="0 0 24 24"></svg> </div>
</a>
</div>
<!-- Important GSAP CDN LINK -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<!-- JAVASCRIPT FILE LINK -->
<script src="app.js"></script>
</body>
</html>There is all the HTML Code for the Download Button Animation. Now, you can see output without Css and JavaScript. then we write Css and javascript for Download Button Animation.
50+ HTML, CSS & JavaScript Projects With Source Code
Only Html Code Output
HTML Code For Download Button Animation
.button.dark-single {
--background: none;
--rectangle: #242836;
--success: #4bc793;
}
.button.white-single {
--background: none;
--rectangle: #f5f9ff;
--arrow: #275efe;
--success: #275efe;
--shadow: rgba(10, 22, 50, .1);
}
.button.dark {
--background: #242836;
--rectangle: #1c212e;
--arrow: #f5f9ff;
--text: #f5f9ff;
--success: #2f3545;
}
.button {
--background: #275efe;
--rectangle: #184fee;
--success: #4672f1;
--text: #fff;
--arrow: #fff;
--checkmark: #fff;
--shadow: rgba(10, 22, 50, .24);
display: flex;
overflow: hidden;
text-decoration: none;
-webkit-mask-image: -webkit-radial-gradient(white, black);
background: var(--background);
border-radius: 8px;
box-shadow: 0 2px 8px -1px var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:active {
transform: scale(0.95);
box-shadow: 0 1px 4px -1px var(--shadow);
}
.button ul {
margin: 0;
padding: 16px 40px;
list-style: none;
text-align: center;
position: relative;
backface-visibility: hidden;
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--text);
}
.button ul li:not(:first-child) {
top: 16px;
left: 0;
right: 0;
position: absolute;
}
.button ul li:nth-child(2) {
top: 76px;
}
.button ul li:nth-child(3) {
top: 136px;
}
.button > div {
position: relative;
width: 60px;
height: 60px;
background: var(--rectangle);
}
.button > div:before, .button > div:after {
content: '';
display: block;
position: absolute;
}
.button > div:before {
border-radius: 1px;
width: 2px;
top: 50%;
left: 50%;
height: 17px;
margin: -9px 0 0 -1px;
background: var(--arrow);
}
.button > div:after {
width: 60px;
height: 60px;
transform-origin: 50% 0;
border-radius: 0 0 80% 80%;
background: var(--success);
top: 0;
left: 0;
transform: scaleY(0);
}
.button > div svg {
display: block;
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin: -9px 0 0 -10px;
fill: none;
z-index: 1;
stroke-width: 2px;
stroke: var(--arrow);
stroke-linecap: round;
stroke-linejoin: round;
}
.button.loading ul {
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:before {
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div:after {
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
.button.loading > div svg {
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
@keyframes text {
10%, 85% {
transform: translateY(-100%);
}
95%, 100% {
transform: translateY(-200%);
}
}
@keyframes line {
5%, 10% {
transform: translateY(-30px);
}
40% {
transform: translateY(-20px);
}
65% {
transform: translateY(0);
}
75%, 100% {
transform: translateY(30px);
}
}
@keyframes svg {
0%, 20% {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
21%, 89% {
stroke-dasharray: 26px;
stroke-dashoffset: 26px;
stroke-width: 3px;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
100% {
stroke-dasharray: 26px;
stroke-dashoffset: 0;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
12% {
opacity: 1;
}
20%, 89% {
opacity: 0;
}
90%, 100% {
opacity: 1;
}
}
@keyframes background {
10% {
transform: scaleY(0);
}
40% {
transform: scaleY(0.15);
}
65% {
transform: scaleY(0.5);
border-radius: 0 0 50% 50%;
}
75% {
border-radius: 0 0 50% 50%;
}
90%, 100% {
border-radius: 0;
}
75%, 100% {
transform: scaleY(1);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
background: #e4ecfa;
}
body .container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .container > div {
flex-basis: 100%;
width: 0;
}
body .container .button {
margin: 16px;
}
@media (max-width: 400px) {
body .container .button {
margin: 12px;
}
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Html+ Css Updated output
JavaScript Code For Download Button Animation
document.querySelectorAll('.button').forEach(button => {
let duration = 3000,
svg = button.querySelector('svg'),
svgPath = new Proxy({
y: null,
smoothing: null
}, {
set(target, key, value) {
target[key] = value;
if(target.y !== null && target.smoothing !== null) {
svg.innerHTML = getPath(target.y, target.smoothing, null);
}
return true;
},
get(target, key) {
return target[key];
}
});
button.style.setProperty('--duration', duration);
svgPath.y = 20;
svgPath.smoothing = 0;
button.addEventListener('click', e => {
e.preventDefault();
if(!button.classList.contains('loading')) {
button.classList.add('loading');
gsap.to(svgPath, {
smoothing: .3,
duration: duration * .065 / 1000
});
gsap.to(svgPath, {
y: 12,
duration: duration * .265 / 1000,
delay: duration * .065 / 1000,
ease: Elastic.easeOut.config(1.12, .4)
});
setTimeout(() => {
svg.innerHTML = getPath(0, 0, [
[3, 14],
[8, 19],
[21, 6]
]);
}, duration / 2);
}
});
});
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(update, smoothing, pointsNew) {
let points = pointsNew ? pointsNew : [
[4, 12],
[12, update],
[20, 12]
],
d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
return `<path d="${d}" />`;
}Final Output Of Download Button Animation
Countdown Timer With Download Button Using Html, CSS & Javascript
Now that we have completed our Download Button Animation. Here is our updated output with Html, Css, and JavaScript. Hope you like the Download Button Css. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Download Button Animation Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Aaron Iker
