Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Material Click Effect for Divi Button Module

by | Apr 3, 2017 | 3 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 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! 😉

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