How to fill buttons on hover in Divi with CSS

May 14, 2019

The button hover animations which come with Divi are quite basic.

The default animation where the button expands and the icon slides in to the right is also the quickest way to tell a sites been built with Divi.

(Not that there’s anything wrong with that, I just like my sites to stand out from the crowd!)

An animation I’ve seen popping up more and more recently is the button fill animation. This is where when you hover on a button the background color fills up from one side.

Checkout the demo to see what it looks like in action:

There’s a few different methods to do this, but in this tutorial I’ll just be covering the box-shadow method.

Let’s get stuck in…

Step 1: Add a button
Add a button module. Style it however you’d like, just make sure:
– the background and border are the same color
– and the icon animation is turned off

Add one of the following CSS classes, depending on which direction you want the effect to go:

– button-fill-bottom
– button-fill-top
– button-fill-left
– button-fill-right

Step 2: Add the CSS
In your dashboard, navigate to your “Theme Options”, then scroll down to the “Custom CSS” box. Paste the following CSS into this box:

/*===== Button fill on hover =====*/
/* Fill from bottom */
.button-fill-bottom {
box-shadow: inset 0px 0px 0px #2F3B47;
transition: all 0.5s !important;
}

.button-fill-bottom:hover {
box-shadow: inset 0px -80px 0px #2F3B47;
}

/* Fill from top */
.button-fill-top {
box-shadow: inset 0px 0px 0px #2F3B47;
transition: all 0.5s !important;
}

.button-fill-top:hover {
box-shadow: inset 0px 80px 0px #2F3B47;
}

/* Fill from left */
.button-fill-left {
box-shadow: inset 0px 0px 0px #2F3B47;
transition: all 0.5s !important;
}

.button-fill-left:hover {
box-shadow: inset 150px 0px 0px #2F3B47;
}

/* Fill from right */
.button-fill-right {
box-shadow: inset 0px 0px 0px #2F3B47;
transition: all 0.5s !important;
}

.button-fill-right:hover {
box-shadow: inset -150px 0px 0px #2F3B47;
}

Step 3a: Customise the box-shadow value
You’ll likely need to edit the box-shadow values if you have different sized buttons.

The number you need to edit is the number of the hover state which isn’t “0px” (e.g. 80px). This number is the height or width of the box-shadow.

If it’s too low, the effect won’t go the whole way.

If it’s too high, the effect will happen really fast.

So you need to make sure it’s as close to the button height / width as possible.

It might take a few goes to get the right value, but it’ll be worth it for the smooth effect!

Step 3b: Customise the box-shadow color
You’ll also need to change the colour hex at the end of the box-shadow to reflect which colour you’d like to have on hover.

Step 4: Save!
Click the green “Save” button at the bottom and you’re done!

Note: At the time of writing this the box-shadow settings are not part of the hover effects allowed with buttons in Divi. This might change in the future though, in which case the same effect would be possible within the module settings.

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

You can also checkout more Divi tutorials below.

Does your website pass the grunt test?