<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br/><br/><br/><br/>
<div class="container">
<div class="row">
<div class="ripple-wrap">
<button class="ripple">Ripple Effect</button>
</div>
</div>
</div>
.ripple-wrap {
background: #f37a2a none repeat scroll 0 0;
border-radius: 7px;
color: #fff;
height: 50px;
overflow: hidden;
width: 200px;
position: relative;
}
.ripple-wrap .ripple {
background: transparent none repeat scroll 0 0;
border: 0 none;
color: #fff;
font-size: 22px;
height: 100%;
margin: 0;
outline: medium none;
padding: 0;
width: 100%;
}
/*jquery add class to effect*/
.ink {
display: block;
position: absolute;
background: rgba(0,0,0,.5);
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.ink.animate {-webkit-animation: ripple 0.65s linear;animation: ripple 0.65s linear;}
@-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(1.5);}
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(1.5);}
}
var parent, ink, d, x, y;
$(".ripple").click(function(e){
parent = $(this).parent();
//create .ink element if it doesn't exist
if(parent.find(".ink").length == 0)
parent.prepend("<span class='ink'></span>");
ink = parent.find(".ink");
//incase of quick double clicks stop the previous animation
ink.removeClass("animate");
//set size of .ink
if(!ink.height() && !ink.width())
{
//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({height: d, width: d});
}
//get click coordinates
//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
x = e.pageX - parent.offset().left - ink.width()/2;
y = e.pageY - parent.offset().top - ink.height()/2;
//set the position and add class .animate
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})
