Animated Download Button to Your Website

How to Add an Animated Download Button to Your Website

Adding interactive elements like animated buttons improves user experience and visual appeal. Let’s explore a morphing download button that transforms from a download icon to a progress bar and finally into a checkmark upon completion. This button uses HTML, CSS, and JavaScript to create smooth transitions and clear feedback for users.

Features of the Code

1. Morphing Animation: The button smoothly changes from a download arrow to a progress bar and then to a checkmark.
2. User Feedback: The animation provides visual cues to the user during downloading.
3. Modern Design: Looks sleek, providing a modern feel to your site.
4. Customizable: Easy to modify the icons, colors, and animations to fit your website’s theme.
5. Responsive: Works well on different screen sizes and devices.

Why Use This Button?

• Enhanced User Experience: By giving feedback during interactions, users stay engaged and informed.
• Attractive Design: Catchy animation makes the site more visually appealing, leaving a professional impression.
• Clear Communication: Helps users understand the process—when the download starts, progresses, and completes.

Where to Add This Code

This type of button is ideal for:

• Download Pages: If you're offering files like software, ebooks, or PDFs, this button can enhance the user experience.
• Product Pages: When customers download product brochures, spec sheets, or user manuals.
• Landing Pages: For lead generation, where users exchange their information for downloadable resources.
• Blog Posts: If you offer downloadable content like templates or resources.

---

How to Add the Code

Here’s how you can implement it step-by-step:

1. HTML: This defines the structure of the button and the visual elements like the icons.
2. CSS: This handles the styling, making sure the button looks good and animates properly.
3. JavaScript: This manages the button’s interactivity—starting the animation and simulating the download process.

1. HTML

HTML

code by Raj Logic Tech

<button type="button" data-dl>
	<span class="dl-icon"></span><span>&#x44;&#x6F;&#x77;&#x6E;&#x6C;&#x6F;&#x61;&#x64;</span>
</button>

Code copied

• The div and button elements create the button structure.
• The icons and text are inside the button for dynamic change.

2. CSS

CSS

code by Raj Logic Tech

button,button span+span{margin:auto}.dl-icon,button{position:relative}*{border:0;box-sizing:border-box;margin:0;padding:0}:root{--dur:3s;--arrowA:polygon(33% 0%,67% 0%,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%);--arrowB:polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%);font-size:calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320))}body,button{display:flex;font:1em/1.5 Hind,sans-serif}body{background:#e3e4e8;height:100vh;overflow:hidden}button{background:#255ff4;border-radius:.2em;color:#fff;cursor:pointer;display:flex;padding:.5em 1em;transition:background .15s linear;width:10.5em;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}button:focus{outline:transparent}button::-moz-focus-inner{border:0}button:not(:disabled):focus,button:not(:disabled):hover{background:#0b46da}button:not(:disabled):active{transform:translateY(1px)}button:disabled{cursor:not-allowed}button span,button:after,button:before{display:inline-block;pointer-events:none}button:after,button:before{border-radius:.25em;opacity:0;top:1em;left:1.3em;height:.5em;transform-origin:0.25em 50%;z-index:2}button:before{transform:rotate(-180deg);width:.8em}button:after{width:1.2em}.dl-icon:after,.dl-icon:before,button:after,button:before{content:"";display:block;position:absolute}.dl-icon:before,button:after,button:before{background:currentColor}.dl-icon{margin-right:.5em;width:1.5em;height:1.5em}.dl-icon:before{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA);top:0;left:calc(50% - .55em);transform-origin:50% 100%;width:1.1em;height:1em;z-index:1}.dl-icon:after{background-image:linear-gradient(#0b46da,#0b46da);background-position:-1.5em 0;background-size:100% 100%;background-repeat:no-repeat;box-shadow:.25em 0 0 inset,-.25em 0 0 inset,0 -.25em 0 inset;bottom:0;width:100%;height:.5em}.dl-working:before{animation:checkOutA var(--dur) linear forwards}.dl-working:after{animation:checkOutB var(--dur) linear forwards}.dl-working .dl-icon{animation:impact var(--dur) linear forwards}.dl-working .dl-icon:before{animation:arrowToBar var(--dur) linear forwards}.dl-working .dl-icon:after{animation:trayToBar var(--dur) linear forwards}@keyframes impact{15%,20%,from,to{transform:translateY(0)}17.5%{transform:translateY(.25em)}}@keyframes arrowToBar{from{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA)}10%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(0)}15%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(.625em)}30%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:1;transform:translateY(.125em)}35%,to{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:0;transform:translateY(.125em)}}@keyframes trayToBar{15%,from{background-color:transparent;border-radius:0;box-shadow:.25em 0 0 inset,-.25em 0 0 inset,0 -.25em 0 inset;transform:translateY(0)}15.1%{background-color:currentColor;border-radius:0;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;transform:translateY(0)}30%{background-color:currentColor;background-position:-1.5em 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;transform:translateY(-.5em)}90%{background-color:currentColor;background-position:0 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;opacity:1;transform:translateY(-.5em)}90.1%,to{background-color:currentColor;background-position:0 0;border-radius:.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 .1em inset;opacity:0;transform:translateY(-.5em)}}@keyframes checkOutA{90%,from{opacity:0;transform:translate(0,0) rotate(-180deg)}90.1%{opacity:1;width:.8em;transform:translate(0,0) rotate(-180deg)}92.5%{opacity:1;width:1em;transform:translate(0,.5em) rotate(-120deg)}95%,to{opacity:1;width:1em;transform:translate(0,.375em) rotate(-135deg)}}@keyframes checkOutB{90%,from{opacity:0;transform:translate(0,0) rotate(0)}90.1%{opacity:1;width:1.2em;transform:translate(0,0) rotate(0)}92.5%{opacity:1;width:1.6em;transform:translate(0,.5em) rotate(-60deg)}95%,to{opacity:1;width:1.6em;transform:translate(0,.375em) rotate(-45deg)}}@media (prefers-color-scheme:dark){body{background:#2e3138}}

Code copied

• Styling: The button is styled with rounded edges, color transitions, and size definitions.
• Icons: The icon-download and icon-check define where the download and success icons appear.

3. JavaScript

JAVASCRIPT

code by Raj Logic Tech

document.addEventListener("DOMContentLoaded",function(){
	this.addEventListener("click",e => {
		let tar = e.target;
		if (tar.hasAttribute("data-dl")) {
			let dlClass = "dl-working";
			if (!tar.classList.contains(dlClass)) {
				let lastSpan = tar.querySelector("span:last-child"),
					lastSpanText = lastSpan.textContent,
					timeout = getMSFromProperty("--dur",":root");

				tar.classList.add(dlClass);
				lastSpan.textContent = "Downloading…";
				tar.disabled = true;

				setTimeout(() => {
					lastSpan.textContent = "Completed!";
				},timeout * 0.9);

				setTimeout(() => {
					tar.classList.remove(dlClass);
					lastSpan.textContent = lastSpanText;
					tar.disabled = false;
				},timeout + 1e3);
			}
		}
	});
});
function getMSFromProperty(property,selector) {
	let cs = window.getComputedStyle(document.querySelector(selector)),
		transDur = cs.getPropertyValue(property),
		msLabelPos = transDur.indexOf("ms"),
		sLabelPos = transDur.indexOf("s");

	if (msLabelPos > -1)
		return transDur.substr(0,msLabelPos);
	else if (sLabelPos > -1)
		return transDur.substr(0,sLabelPos) * 1e3;
}

Code copied

• Click Event: This listens for the user clicking the button and starts the download animation.
• Timeout Function: It simulates the completion of the download after 3 seconds, replacing the download icon with a checkmark.

---

Conclusion

Adding this morphing download button to your website can drastically improve user interaction and create a polished, modern design. It provides clear visual feedback during downloads, making it perfect for pages where file downloads are essential.

Ideal Locations for This Button:

• Download landing pages
• Product details sections
• Blogs offering downloadable resources

By implementing it, you'll not only elevate your website's functionality but also enhance the overall experience, encouraging users to engage with your content more actively.