In this tutorial you'll learn how to implement different hover effects for Divi Button module to enhance the overall user experience by providing immediate visual feedback to the site visitors. When a button responds as users hover over it, the interface feels more intuitive, making it easier for users to know where to click next.

We'll cover techniques from simple transforms like Grow, Shrink and Rotate, to more dynamic animations like Wobble, Float, and Spin. These hover effects offer a simple yet effective way to make your Divi buttons more engaging, whether you're aiming for a more dynamic look or just a bit of extra visual interest.

To see these effects in action, simply hover over the demo buttons in each effect's section below.

Table of Contents

Requirements

Most of these effects rely on the Transform settings of the Divi Button module, so they should work with any button design you've created - unless you've already applied Transform settings that might conflict with these effects.

Let’s dive in and bring these engaging effects to life to transform your static Divi buttons into dynamic elements!

Grow Effect

The Grow hover effect makes your button slightly larger by scaling it up when hovered.

To implement the Grow hover effect open the Divi Button module settings and follow these steps:

1. Navigate to Design → Transform and enable the hover settings
2. Click the Hover tab
3. Go to the Transform Scale tab
4. Set the scale value to 115% for both horizontal and vertical transform scale fields.

Notice that I didn't change the button's normal state - only its hover state is affected, so it grows by 15% when hovered. You can play around with the scale value to find out what works best for you.

Shrink Effect

The Shrink hover effect works in the opposite way of the Grow effect - it scales the button down instead of up when hovered.

To implement the Shrink hover effect all you need to do is set the scale values to something less than 100%. For instance, setting the scale to 85% makes the button shrink by 15% on hover.

Now, when you hover over your button, you'll notice that it becomes smaller.

Rotate Right Effect

The Rotate Right effect gives your button a slight clockwise twist when hovered.

To add the Rotate Right effect we'll use the Transform Rotate feature of Divi Button module:

1. Navigate to Button Settings → Design → Transform and enable hover settings
2. Click the Hover tab
3. Go to the Transform Rotate tab
4. Set the rotation value to 4deg for the z-axis field

Rotate Left Effect

The Rotate Left effect gives your button a subtle counter-clockwise twist when hovered (the opposite of the Rotate Right effect).

So, we again use the Transform Rotate settings similar to the Rotate Right effect. However, the rotation degree value should be negative. Let's apply -4deg.

Wobble Timed Effect

The Wobble effect makes your button wobble on hover. We'll cover two versions: a timed wobble that loops three times and stops, and an infinite wobble that continues as long as the button is hovered over.

To implement the Wobble Timed effect follow these steps:

1. Create the Animation: Define the wobble animation @keyframes and name it dvcs_wobble.
2. Assign a CSS Class to button: Open Button module settings, navigate to Advanced → CSS ID & Classes → CSS Class, and add the dvcs_wobble_timed class to this button. This CSS class will be used in the button selector ensuring that the effect applies only to this button.
3. Bind the Animation: Use the CSS animation property to bind the dvcs_wobble animation to the button's hover state using the dvcs_wobble_timed class in the selector.

Below is the CSS for the timed wobble effect. Note that the animation iteration count is set to 3(three):

/*** Wobble Timed Effect ***/
.et_pb_button.dvcs_wobble_timed:hover {
    -webkit-animation: dvcs-wobble 0.2s 3 linear;
            animation: dvcs-wobble 0.2s 3 linear;
}

@-webkit-keyframes dvcs-wobble {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
    }
}
@keyframes dvcs-wobble {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
    }
}
/*** END Wobble Timed Effect ***/

Wobble Infinite Effect

The Wobble Infinite effect makes your button wobble continuously while hovered - similar to the timed version, but with one key difference: the animation repeats indefinitely.

To implement the Wobble Infinite effect:

1. Define the wobble animation @keyframes and name it dvcs_wobble (the same animation used for the timed version above).
2. In the Button module settings, navigate to Advanced → CSS ID & Classes → CSS Class, and add the class dvcs_wobble_infinite to your button.
3. Bind the dvcs_wobble animation to the button's hover state, and set the animation iteration count to infinite instead of a fixed number.

Here is the custom CSS for the Wobble Infinite effect:

/*** Wobble Infinite Effect ***/
.et_pb_button.dvcs_wobble_infinite:hover {
    -webkit-animation: dvcs-wobble 0.2s infinite linear;
            animation: dvcs-wobble 0.2s infinite linear;
}

@-webkit-keyframes dvcs-wobble {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
    }
}
@keyframes dvcs-wobble {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
    }
}
/*** END Wobble Infinite Effect ***/

Note: Both wobble effects use the same dvcs_wobble animation, so you only need to include the @keyframes definition once on your site. Then, simply assign the appropriate CSS class - either dvcs_wobble_timed or dvcs_wobble_infinite - to your Button module.

Float Up Effect

The Float Up hover effect makes your button move upward slightly when hovered.

To add the Float Up hover effect we'll use the Transform Translate feature of the Button module:

1. Go to Button Settings → Design → Transform and enable hover settings
2. Switch to the Hover tab
3. Click the Transform Translate tab
4. Set the y-axis (vertical) translate value to -6px (translateY).

This will shift the button upward by 6px on hover.

Float Down Effect

The Float Down hover effect makes your button move downward when hovered.

To implement this effect, follow the same steps as the Float Up effect but use a positive value for the vertical translate. Let's set it to 6px, this will gently shift the button downward on hover.

Float Up with Shadow Effect

The Float Up with Shadow effect works like the standard Float Up effect but adds a box shadow that becomes visible on hover when the button moves upwards.

To implement this effect simply add a box shadow to the button in addition to the transform translate settings we covered earlier in the Float Up effect's section.

First, set the box shadow for the button's normal state. For demo purposes let's make the box shadow invisible initially, so that it becomes more noticeable when the button is hovered over. To do this, go to Button Settings → Design → Box Shadow, select a shadow preset, and apply 0px values to all settings.

Next, enable the hover options for the Vertical Position and Blur Strength fields, and set the following values:

1. Set 4px for Box Shadow Vertical Position
2. Set 4px for Box Shadow Blur Strength
3. Set the Shadow Color (any color you prefer).

Float Down with Shadow Effect

The Float Down with Shadow effect builds on the Float Up with Shadow effect, but with a twist in the shadow's direction. Since the button moves down on hover, its box shadow appears above the button.

To achieve this effect, simply set a negative value for the Vertical Position of the box shadow. For example, setting it to -4px will cause the shadow to shift upwards, perfectly complementing the downward movement of the button.

Spin Effect

The Spin effect might not be ideal for every site, but it's a great option to have in your toolkit and a fun way to showcase how effortlessly you can achieve dynamic animations with the Button module’s Transform settings - no custom CSS required.

To add the Spin hover effect to Divi Button module we'll use again the Transform Rotate feature:

1. Go to Button Settings → Design → Transform and enable hover settings
2. Switch to the Hover options tab
3. Click the Transform Rotate tab
4. Set the rotation value to 360deg for the z-axis field

Note that I’ve set the rotation to 359.99deg instead of 360deg because using 360deg resets the field value to 0deg, making it impossible to achieve a full 360deg spin. It appears to be a minor bug in Divi, and hopefully will be resolved soon.

Wrapping Up

I hope you enjoyed exploring these hover effects for Divi buttons. Throughout this tutorial we covered a variety of techniques - from simple transforms like Grow, Shrink, Rotate Right, and Rotate Left to more dynamic animations like the Wobble (both timed and infinite) and Spin effects. We even explored how subtle box shadow tweaks can enhance the Float Up and Float Down effects.

It’s exciting to see how much Divi has evolved, allowing many of these effects to be implemented with built-in settings instead of custom CSS. Feel free to experiment with these settings and adapt the effects to match your unique design style.

If you have any questions, feedback, or even your own tips and tricks, please leave a comment below.