Simple button hover and click animation

buttonanimationfont-awesome

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.



To add click event we need javascript (jQuery) and class btn-selected. Class btn-selected is used to add green color to element and to hold font awesome icon on the middle. In javascript code we need to add click event and to check does button that we click on it have class btn-selected. If button have that class we remove it and add class fa-close to second <span> element and button is returned to the default state, if button don't have that class we add it to button and add fa-check class to the second <span> element.