When working with the Button element in Brizy, you can add a hover effect to make it more compelling. However, the hover effects offered by Brizy are limited compared to other page builders (e.g., Elementor and Divi Builder). In Brizy, you can only set a different background color, typography, and border on the hover state. There is no option to add an animation effect. If you really want to add hover animation to a button in Brizy, you can accomplish it using custom CSS. This article will show you how.
To be able to add custom CSS, you need to use the pro version of Brizy as this feature is only available on Brizy Pro.
How to Add Hover Animation to a Button in Brizy
If you are new to Brizy, you can read our previous article to learn how to use it. In this article, we will go straight to adding the Button element.
Start by adding the Button element by dragging it from the left panel to the canvas area.
Once the Button element is added, click it to open the settings bar. On the appearing settings bar, click the gear icon to open the settings panel.
On the settings panel, open the Advanced tab and scroll down to the Custom CSS section and paste the following code.
The code:
element:hover {
transition: all .2s ease-in-out;
transform: scale(1.1, 1.1);
cursor: pointer;
z-index: 1;
}
The code above uses the transform property to add the hover animation effect. The animation effect added to the property is scale. The transform property itself supports four other animation effects:
- matrix
- translate
- rotate
- skew
You can set the animation pace by setting the values on the effect. To learn more about the transform property of CSS, you can refer to this page.
