Material Click Effect for Divi Button Module

by | Apr 3, 2017 | 0 comments

In this post I’d like to share a code snippet for applying a nice material click effect to Divi Button module. It consits of CSS and JS parts, check out the demo and follow the easy steps below for implementation of this effect in your project.
Demo:

Step 1:

Add class wrapper to Button Module by going to Button Module Settings -> Custom CSS -> CSS Class field as indicated below.

Step 2:

Copy the click effect CSS code snippet and add it into Divi -> Theme Options -> General -> Custom CSS field.

CSS code snippet
/* Material-style button click effect */
a.wrapper {
 overflow: hidden;
}
.ink {
 display: block;
 position: absolute;
 background:rgba(255, 255, 255, 0.3);
 border-radius: 100%;
 -webkit-transform:scale(0);
 transform:scale(0);
}
.animate {
 -webkit-animation:ripple 0.65s linear;
 animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
 100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@keyframes ripple {
 100% {opacity: 0; transform: scale(2.5);}
}
/* End material-style button click effect */

Step 3:

Add the JS snippet into Divi -> Theme Options -> Integration -> Add code to the < body > field like it is indicated in the image below.

JS code snippet
<script type="text/javascript">
(function($) {

/* Material-style button click effect */
$(function(){
 var ink, d, x, y;
 $("a.wrapper").click(function(e){
 if($(this).find(".ink").length === 0){
 $(this).prepend("<span class='ink'></span>");
 }
 
 ink = $(this).find(".ink");
 ink.removeClass("animate");
 
 if(!ink.height() && !ink.width()){
 d = Math.max($(this).outerWidth(), $(this).outerHeight());
 ink.css({height: d, width: d});
 }
 
 x = e.pageX - $(this).offset().left - ink.width()/2;
 y = e.pageY - $(this).offset().top - ink.height()/2;
 
 ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});
});
/* End material-style button click effect */

})(jQuery);
</script>

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

Pin It on Pinterest

Shares