Creating a Hover Effect Animation on a Button Element in Thrive Architect

There are multiple ways in which you can use and customize a “Button” element when working in Thrive Architect.

When it comes to its design, you can either choose a predefined template from the template library, or you can use the left sidebar options to create a new design from scratch.

In this article, we will take you through the step-by-step process for creating this animation effect when hovering over a button:

Customize the “Button” element

First, add the “Button” element to your page or post:

Next, change the color of the button, if you want, using the left sidebar list of options:

Clicking on the color field will trigger the color picker. Either choose a color manually or insert a HEX/RGB code in the corresponding field, as showcased below:

Don’t forget to save your changes:

Access the “Hover” state

Now that you’ve changed the color of your button, you can proceed to add a hover animation effect. To access the hover state, you first have to open the states drop-down list:

Here, select “Hover”:

And this will automatically take you to the available list of options for the hover state:

Change the color

Open the “Background Style” section:

Delete the already existing color, added by you in the previous step:

Next, open the color field and simply select a new color for your button:

Once more use the color picker or a HEX/RGB code, and when done, click on “Apply”:

Add an animation

Now, for the last step, you have to open the “Animation & Action” section of the left sidebar:

And here, click on the “CSS Animation” option:

This will prompt you with a drop-down list of available animations. For this example, we have chosen the “Rectangle out” animation for the background:

Lastly, click on “Apply”:

And then return to the “Normal” state of the button:

Now, whenever you hover over your “Button” element this animated effect will take place:

I hope you found this step-by-step tutorial useful and easy to follow. If you want to read more articles of this type, make sure to check out our knowledge base.

Lastly, don’t hesitate to rate this article with a smile, if you enjoyed it! 🙂