In user experience design, microinteractions are small moments of feedback that help a user navigate an interface. Often, microinteractions are made with subtle animation in website design.
In this tutorial, you will build a functional download button with microinteractions. To get it working, we will be using CSS transitions and animations, along with the lightweight animation library anime.js and segment.js for SVG path
animations.
At the end of the tutorial, we will get a download button like this:
The original design of the download button belongs to Pedro Aquino, and can be found on this Dribbble shot. The full code can be found on this Github repository, and here is the demo page.
Let’s see the HTML code we will be using:
It is important to note that the SVG path
elements have been drawn by hand to get the result we want. For example, at some point, we want the button border to perform an elastic animation, so we need an SVG path
ready for that morphing animation with anime.js (same structure in both paths
):
With our markup ready, let’s style our button. Please note that we are not including the whole stylesheet here, but rather the most important parts; you can find the entire code on the Github repository. The code has been fully commented for better understanding.
Let’s see the SCSS variables we have defined, and the helper class to hide elements:
The styles for the real button
element:
Our button can be in three different states: downloading
, progressing
, and completed
. We therefore have defined the styles needed for each state using the following structure:
Another interesting piece of code is used to achieve the ball animation when the download has finished:
All the other styles used can be found on the Github repository.
We will be using anime.js and segment.js, both lightweight libraries to help with animations.
Please note that we will not include some variables declarations in the following code snippets, for the sake of clarity. If you have any doubts, please check the Github repository.
Here is the basic code we are using to capture the click events on the button
and perform the behavior we want:
The animation progress has been faked in the demo; for a real use case it will be replaced with real progress data. This is the function that handles the progress:
Finally, here is the piece of code used to perform the animation when download has been completed, where the ball animation is triggered and we morph the path
elements.
This article showed the main pieces of code used to build this download button:
You can play with the live DEMO, or get the full code on Github. Please also note that this component is not fully ready for production, as it needs real progress data and some considerations on how the backend will affect the microinteractions.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!