Go back
Bookmarked
0000087

Animate a button using CSS translateX() function and jQuery

Written on August 18, 2021
Snippet
HTML

To achieve this I use the click() method that allows jQuery to make changes to the HTML when clicking on the button. In this case the toggleClass() method will add and remove the .move class.

jQuery

To accomplish a smooth effect, I use the transition property with 600ms. In case of not using it, the button would disappear and appear without a nice movement to the sides.

Lastly, the translateX() property will reposition the element 100px on the X axis when jQuery adds the .move class.

CSS