Material Click Effect for Divi Button Module
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 to implement this effect in your projects.
Demo
Assinging the CSS class
First add the wrapper CSS class to Button Module by going to Button Module Settings -> Custom CSS -> CSS Class field as indicated below.
Adding the CSS
Then copy the click effect CSS snippet and add it into Divi -> Theme Options -> General -> Custom CSS field.
CSS 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);
-ms-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;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/*** END Material-style button click effect ***/Adding the JS code
And, finally, 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! ;)
Is there a way to add this to all Divi buttons?
Yes, simply replace the
wrapperclass with theet_pb_buttonclass both in JS and CSS snippets and it should work.Yeah it was awesome,Thanks…