Ripple effect in Material Design using jQuery and CSS3

var $self = $(this);

if ($self.is(".btn-disabled")) {
                return;
            }
            if ($self.closest("[data-ripple]")) {
                e.stopPropagation();
            }

var initPos = $self.css("position"),
                offs = $self.offset(),
                x = e.pageX - offs.left,
                y = e.pageY - offs.top,
                dia = Math.min(this.offsetHeight, this.offsetWidth, 100),
                $ripple = $('<div/>', { class: "ripple", appendTo: $self });

if (!initPos || initPos === "static") {
                $self.css({ position: "relative" });
            }

$('<div/>', {
                class: "rippleWave",
                css: {
                    background: $self.data("ripple"),
                    width: dia,
                    height: dia,
                    left: x - (dia / 2),
                    top: y - (dia / 2),
                },
                appendTo: $ripple,
                one: {
                    animationend: function() {
                        $ripple.remove();
                    }
                }
            });
        });

});</script>

 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <button data-ripple="#444" class="mad-button-raised mad-ico-left bg-primary"><i class="material-icons">person</i>User settings</button>
    <a data-ripple="" class="mad-button-action bg-accented"><i class="material-icons">search</i></a>
    <a data-ripple="rgba(0,0,0,0.13)" class="mad-button-raised mad-ico-right bg-accented">Edit<i class="material-icons">edit</i></a><br /><br />
    <div data-ripple="green" class="bg-primary-darker">Ripple in div</div>
        <style>/* Required */
    .ripple{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:inherit;pointer-events:none;animation:ripple-shadow 0.4s forwards;-webkit-animation:ripple-shadow 0.4s forwards}
 .rippleWave{backface-visibility:hidden;position:absolute;border-radius:50%;transform:scale(0.7);-webkit-transform:scale(0.7);background:rgba(255,255,255,1);opacity:0.45;animation:ripple 2s forwards;-webkit-animation:ripple 2s forwards}
 @keyframes ripple-shadow{0%{box-shadow:0 0 0 rgba(0,0,0,0.0)}20%{box-shadow:0 4px 16px rgba(0,0,0,0.3)}100%{box-shadow:0 0 0 rgba(0,0,0,0.0)}}
 @-webkit-keyframes ripple-shadow{0%{box-shadow:0 0 0 rgba(0,0,0,0.0)}20%{box-shadow:0 4px 16px rgba(0,0,0,0.3)}100%{box-shadow:0 0 0 rgba(0,0,0,0.0)}}
 @keyframes ripple{to{transform:scale(24);opacity:0}}
 @-webkit-keyframes ripple{to{-webkit-transform:scale(24);opacity:0}}
 
 /* For demo */
 [class*=mad-button-]{box-sizing:border-box;-webkit-box-sizing:border-box;display:inline-block;text-align:center;position:relative;margin:0;white-space:nowrap;vertical-align:middle;font-family:"Roboto",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;text-decoration:none;border:0;outline:0;background:none;transition:0.3s;cursor:pointer;color:rgba(0,0,0,0.82)}
 [class*=mad-button-] i.material-icons{vertical-align:middle;padding:0}
 .mad-button-raised{height:36px;padding:0 16px;line-height:36px;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.25)}
 .mad-button-raised:hover{box-shadow:0 0 2px rgba(0,0,0,0.13),0 2px 4px rgba(0,0,0,0.2)}
 .mad-button-action{width:56px;height:56px;padding:16px 0;border-radius:32px;box-shadow:0 0 2px rgba(0,0,0,0.13),0 5px 7px rgba(0,0,0,0.2)}
 .mad-button-action:hover{box-shadow:0 0 2px rgba(0,0,0,0.11),0 6px 9px rgba(0,0,0,0.18)}
 [class*=mad-button-].mad-ico-left i.material-icons{margin:0 8px 0 -4px}
 [class*=mad-button-].mad-ico-right i.material-icons{margin:0 -4px 0 8px}
 .bg-primary-darker{background:#1976D2;color:#fff;padding:40px}
 .bg-primary{background:#2196F3;color:#fff}