Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Position Aware Hover Effect for Divi Button

by | Apr 24, 2017 | 7 comments

In this tutorial we are going to implement a position aware hover effect to Divi button module which takes effect depending on the position of coursor when hovering over the button. Hover over the demo button below from different sides to understand what I mean.
Demo:
To achieve this effect first apply the following advanced design settings and then use the CSS and JS code snippets provided below.
Step 1:

Apply button module advanced design settings

Step 2:

Add the position_aware_effect CSS class to Button Module Settings -> Custom CSS -> CSS Class field like it is indicated in the image below.

Step 3:

Copy the position aware hover effect CSS code snippet below and add it into the Divi -> Theme Options -> General -> Custom CSS field.

CCS code snippet for position aware hover effect
Position aware hover effect CSS snippet
[css]
/* Position Aware Hover Effect */
.et_pb_button.position_aware_effect {
text-shadow:1px 1px rgba(13, 12, 12, 0.3), 2px 2px rgba(13, 12, 12, 0.3);
box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.2);
overflow:hidden;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
z-index: 1 !important;
}
.et_pb_button.position_aware_effect:hover{
color: rgba(38, 38, 38, 0.5) !important;
box-shadow: 0px 6px 14px 1px rgba(0,0,0,0.2);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.et_pb_button.position_aware_effect:focus{
color: rgba(13, 13, 13, 1) !important;
}
@media all and (min-width: 981px) {
.et_pb_button.position_aware_effect:after {
margin-left: 0em !important;
}
}
@media all and (max-width: 980px) {
.et_pb_button.position_aware_effect:after {
line-height: 1.7em !important;
}
}

.blob{
z-index: -1;
position:absolute;
width:2px;
height:2px;
margin-left: 0;
margin-top: 0;
background: #ff4466 !important; /* define your color here */
border-radius: 50%;
border-color: #ff4466 !important; /* define your color here */
border-width: 1px;
border-style: solid;
-webkit-transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
}
.expand{
border-color: #ff4466 !important; /* define your color here */
border-width: 500px;
border-style: solid;
-webkit-transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
margin-left:-500px;
margin-top:-500px;
}
/* End Position Aware Hover Effect */
[/css]

Step 4:

Copy the position aware hover effect JS code snippet below and add it into the Divi -> Theme Options -> Integration -> Add code to the < body > field.

JS code snippet for position aware hover effect
<script type="text/javascript">
(function($) {
/* Position aware hover effect */
var ofs, x, y;
$('.et_pb_button.position_aware_effect').on('mouseenter', function(e){
  ofs = $(this).offset();
  x = (e.pageX - ofs.left);
  y = (e.pageY - ofs.top);
var name = $(this).text().toLowerCase().split(' ')[0];
  
$(this).append('<div class="blob ' + name + '" style="left:' + x + 'px; top: ' + y + 'px;"></div>');
  
var blob = $(this).find('.blob');
setTimeout(function(){
    blob.addClass("expand");
},20);
});

$('.et_pb_button.position_aware_effect').on('mouseleave', function(e){
  ofs = $(this).offset();
  x = (e.pageX - ofs.left);
  y = (e.pageY - ofs.top);
  var blob = $(this).find('.blob');
  blob.css({'left':x, 'top':y});
  blob.removeClass("expand");
  setTimeout(function(){
      blob.remove();
},800);
});

})(jQuery);
</script>

 

That’s all, hope you’ll find this effect useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉

Inspired by: In&&Out

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Free Download Divi Section Layouts

Download 19 ready-to-use Divi templates for FREE!

You have Successfully Subscribed! Please confirm your email address.

Black Friday Is Coming!

Subscribe to get notified when the biggest SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Pin It on Pinterest

Share This