How to Add Hover Animation to a Button in Brizy

Updated: March 29, 2021

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.