Simple button hover and click animation
Tutorial by Mirko Zovko | 10. Apr. 2020.
We can never get enough buttons animations. In this tutorial I'll show you how to create simple button hover and click animation using css animation, jQuery for tracking click event and font Awesome for icons. You need to add tag <p> with class btn, color style as you want, and two <span> tags. First <span>is used for button name, and the second one <span> is used for font-awesome icon.
The most important thing in style is to add to btn class width, height, display block, and transition. After that add display block to both of <span> elements and add them transition too, and put them with style float next to each other. After we hover btn element we need to move away first <span>element and give full width to second <span> element.