This article was originally published on this site


You may have noticed lately that UI animations are gaining a lot of popularity in the web design domain. Web creators have many options for how to add animations to the websites they build. Personally, our favorite these days is using Lottie animations, even though alternative methods such as creating SVG animations, or vector animations using After Effects, are also great. 

In terms of added value for the website visitor or interface user, animations are a great friend of user experience. Because user experience thrives on exciting micro-interactions and grabbing user attention in a subtle, elegant way, well-crafted animations are a game-changer when it comes to crafting a user-friendly interface. 

If we narrow our discussion one step further, one of the most effective use-cases for animation design is animated buttons. Call to action buttons are often one of the most significant design elements on a page, and if animating them increases their clickability, then they’re definitely something we’ll want to pursue.

In this post, we are going to dive into how to use the Lottie widget to create an animated button on your Elementor site.