Button hover animations

[lrgnbrbr]

Hi i was wandering if you could help me with button hover animation.
I want to do something like this :

Your IT Experts | ITI

( slide effect on the background color )

Can you help me ? Thanks a lot.

[prakash_s]

Hello @lrgnbrbr,

Thanks for writing to us.

To add button animation on hover. it would require custom development. I would recommend you to consult a developer who can assist you with your concern.

If you have an idea about CSS coding, Please have look at this article for reference https://codepen.io/kay8/pen/azKbjN

You can use our Button Element and then add a custom class.

Now add this custom CSS in X/Pro -->Theme Option --->CSS

.custom-class .x-anchor-content:before{
background-color: #135cfd;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scaleX(0);
transition: transform .6s cubic-bezier(.075,.82,.165,1);
transform-origin: center right;
}
.custom-class:hover .x-anchor-content:before{
transform: scaleX(1);
transform-origin: center left;
}
.custom-class:hover{background-color:transaparent;}

Please note that you can change your custom Class Name and Background-color as per your need.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks for understanding