In this tutorial I’ll show you how to add a position-aware hover effect to Divi buttons. What makes this hover effect special is that it activates and deactivates based on the cursor’s exact position as it enters and leaves the button’s boundaries.
Table of Contents
Demo
Hover over the demo button below from different sides to see the effect in action.
How the Position Aware Hover Effect Works
When the user’s cursor enters the button’s boundaries, a blob-shaped element gets created precisely at the point of entry.
This blob then smoothly expands to fill the entire background of the button, positioning itself behind the button’s text and arrow icon.
As the cursor exits the button the blob contracts back toward the exact point of exit, gradually disappearing.
This creates a dynamic position-aware hover effect that responds seamlessly to the user’s cursor movements.
To achieve this effect, we’ll tweak the Divi Button module settings and then apply custom CSS and JavaScript code as explained in the step-by-step guide below.
Step 1. Apply Divi Button Module Settings
We’ll be creating a button similar to the demo button above.
Some of the settings we’ll apply are necessary for the hover effect to work properly, such as setting the button’s overflow and z-index properties.
However, the styling of the button is optional – you can apply any design you like to match the overall look of your website.
Set the Button overflow to hidden
For the position-aware hover effect to work properly it’s important to set the button’s overflow property to hidden.
This ensures that the blob element created when the button is hovered over does not extend beyond the button’s edges, keeping it within the button’s boundaries.
We’ll create the blob element using the custom CSS and JavaScript provided below.
So, let’s go to Button Settings -> Advanced -> Visibility and select the Hidden option for both Horizontal Overflow and Vertical Overflow fields.
Set the Button z-index value
We need to make sure the blob doesn’t cover the button text but stays in the background. We can do that by setting the button’s z-index to 1(one) in Button Settings -> Advanced -> Position -> Z Index.
However, this alone isn’t sufficient. We’ll also set the blob’s z-index value to -1 in the custom CSS provided below. This will ensure the blob element expands and covers the button’s background behind the button text.
Apply Divi Button custom styles settings
Next, let’s apply the following design settings in Button Settings -> Design -> Button:
- Enable custom styles for the button
- Set button text size to 26px
- Set button text color to #ffffff
- Set button background color to #2856b6
- Set button border width to 1px
- Set button border color to #ffffff
- Set button border radius to 0px
- Set button font style to uppercase
Apply Divi Button module Box Shadow settings
Let’s also add a box shadow to the button. In its normal state, the button will have a subtle shadow, and when hovered over, the shadow will become more prominent.
To achieve this go to Button Settings -> Design -> Box Shadow and apply the following settings for both the normal and hovered states of the button:
- Select the box shadow preset
- Set the box shadow horizontal position to 0px
- Set the box shadow vertical position to 2px
- Set the box shadow blur strength to 6px
- Set the box shadow spread strength to 2px
- Set the box shadow color to rgba(0,0,0,0.2)
- Set the box shadow vertical position to 6px (hover)
- Set the box shadow blur strength to 14px (hover)
- Set the box shadow spread strength to 1px (hover)
Step 2. Add the hover effect’s custom JS
To achieve this position-aware hover effect we’ll detect the cursor’s position when it hovers over the button (on ‘mouseenter’ event).
Then we’ll create and append the blob element to the button, setting its left and top offset values based on the cursor’s position.
When the cursor leaves the button (‘mouseleave’ event), we’ll again capture the cursor’s position and adjust the blob’s positioning accordingly.
We’ll then remove the expand CSS class from the blob to make it shrink and gradually disappear at the point where the cursor left the button.
Finally, once the blob has visually disappeared, we’ll remove the blob element completely. It will be created again the next time our button is hovered over.
So, the following JavaScript code does what we need, add it into Divi -> Theme Options -> Integration -> Add code to the <body> field, or use a Code module instead.
<script type="text/javascript">
(function($) {
/**
* Position aware hover effect
* for Divi Button module.
*
* @source https://divicio.us
*/
function dvcs_position_aware_effect(){
let offsets, x, y;
// mouseenter
$('.et_pb_button.dvcs_position_aware_effect').on('mouseenter', function(e){
offsets = $(this).offset();
x = (e.pageX - offsets.left);
y = (e.pageY - offsets.top);
$(this).append('<div class="blob" style="left:' + x + 'px; top: ' + y + 'px;"></div>');
let blob = $(this).find('.blob');
setTimeout(function(){
blob.addClass("expand");
}, 20);
});
// mouseleave
$('.et_pb_button.dvcs_position_aware_effect').on('mouseleave', function(e){
offsets = $(this).offset();
x = (e.pageX - offsets.left);
y = (e.pageY - offsets.top);
let blob = $(this).find('.blob');
blob.css({'left':x, 'top':y});
blob.removeClass("expand");
setTimeout(function(){
blob.remove();
}, 800);
});
}
dvcs_position_aware_effect();
})(jQuery);
</script>Step 3. Add the hover effect’s custom CSS
Now that we’ve created the blob element using JavaScript, let’s apply some styling to it.
We need to style both the initial and expanded states of the blob and ensure it expands and shrinks smoothly.
To achieve that add the following custom CSS into Divi -> Theme Options -> General -> Custom CSS field, or into the styles.css file of your child theme.
/**
* Add Position Aware Hover Effect to Divi Buttons
* @site https://divicio.us
*/
.dvcs_position_aware_effect.et_pb_button .blob {
position:absolute;
width:2px;
height:2px;
margin-left: 0;
margin-top: 0;
border-radius: 50%;
border-width: 1px;
background: #ff4466 !important; /* set your color here */
z-index: -1;
}
.dvcs_position_aware_effect.et_pb_button .expand {
border-width: 500px;
margin-left:-500px;
margin-top:-500px;
}
.dvcs_position_aware_effect.et_pb_button .blob,
.dvcs_position_aware_effect.et_pb_button .expand {
border-color: #ff4466 !important; /* set your color here */
border-style: solid;
transition: border-width 0.7s ease-in-out, margin-left 0.7s ease-in-out, margin-top 0.7s ease-in-out;
}
/* End Position Aware Hover Effect */Step 4. Activate the position aware hover effect for Divi button
Finally, let’s activate the position-aware hover effect by adding the dvcs_position_aware_effect to our button in Button Settings -> Advanced -> CSS ID & Classes -> CSS Class
Wrapping Up
That’s it! You’ve successfully added a dynamic, position-aware hover effect to your Divi button that responds uniquely to user interactions.
Feel free to customize the styling further to match your website’s design. Experiment with different colors, sizes, and transitions to make the hover effect truly your own.
You can also try other creative button effects as well to make your site stand out even more.
I hope this tutorial has been helpful. If you have any questions please feel free to leave a comment below.
Continue Reading: Material Click Effect for Divi Button Module
THANKS Ivan. Very cool effect!! AND easy to implement!!
Hi DAN. Glad you like it, thanks for stopping by.
Spoke too soon. Please disregard my first comment^^ Something must have gotten held up in a cache – worked after 5 minutes :)
Thanks for your comment, Valerie. Glad to know it finally worked :)
Oh no! I tried using this and I’m not sure if a divi update may have outdated this blog post. I tried applying it to the ‘Join Now!’ button on my site.
Just wanted to say thank you to you, Ivan. I love your site and love it that you share your great examples to inspire the community. This position aware example is really awesome, again thanks. Jason
Thanks for your kind words, Jason. I really appreciate that :) Glad you like what I am doing for the community.