"Ripple Effect "
Bootstrap 4.0.0 Snippet by foysal991

<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"); })

Related: See More


Questions / Comments: