"Button Ripple Effect"
Bootstrap 4.1.1 Snippet by saikiran053

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Button Ripple Effect </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body class="index"> <div class="container-fluid margin"> <button href="https://www.behance.net/sakiran" target="_blank" class="themeBtn ripple-effect">Saikiran Netha's</button> </div> <div class="container-fluid margin"> <a class="themeBtn2 ripple-effect">Saikiran Netha's</a> </div> <div class="container-fluid margin"> <a href="https://dribbble.com/saikiran053" target="_blank" class="themeBtn3 ripple-effect">Follow @ Dribble</a> </div> <div class="container-fluid margin"> <a href="https://www.behance.net/sakiran" target="_blank" class="themeBtn4 ripple-effect">Follow @ Behance</a> </div> </body> </html>
.margin{ margin-top:20px; margin-bottom:20px; } .themeBtn { background: #ff5c00; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } a:hover{ color: #ffffff; text-decoration:none; } .themeBtn:hover { background: rgb(255, 92, 0); color: #ffffff; } .themeBtn2 { background: #7600ff; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn2:hover { background: rgb(118, 0, 255); color: #ffffff; } .themeBtn3 { background: #ff2e4d; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn3:hover { background: rgb(255, 46, 77); color: #ffffff; } .themeBtn4 { background: #006eff; color: #ffffff !important; display: inline-block; font-size: 15px; font-weight: 500; height: 50px; line-height: 0.8; padding: 18px 30px; text-transform: capitalize; border-radius: 1px; letter-spacing: 0.5px; border:0px !important; cursor:pointer; } .themeBtn4:hover { background: rgb(0, 110, 255); color: #ffffff; } .ripple-effect { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } .ink { display: block; position: absolute; pointer-events: none; border-radius: 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background: #fff; opacity: 0.5; } .ink.animate { -webkit-animation: ripple .5s linear; -moz-animation: ripple .5s linear; -ms-animation: ripple .5s linear; -o-animation: ripple .5s linear; animation: ripple .5s linear; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } @-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5); } } @-moz-keyframes ripple { 100% { opacity: 0; -moz-transform: scale(2.5); transform: scale(2.5); } } @-ms-keyframes ripple { 100% { opacity: 0; -ms-transform: scale(2.5); transform: scale(2.5); } } @-o-keyframes ripple { 100% { opacity: 0; -o-transform: scale(2.5); transform: scale(2.5); } }
/* ======================================================= Ripple-effect animation ======================================================= */ (function($) { $(".ripple-effect").click(function(e){ var rippler = $(this); // create .ink element if it doesn't exist if(rippler.find(".ink").length == 0) { rippler.append("<span class='ink'></span>"); } var ink = rippler.find(".ink"); // prevent quick double clicks ink.removeClass("animate"); // set .ink diametr if(!ink.height() && !ink.width()) { var d = Math.max(rippler.outerWidth(), rippler.outerHeight()); ink.css({height: d, width: d}); } // get click coordinates var x = e.pageX - rippler.offset().left - ink.width()/2; var y = e.pageY - rippler.offset().top - ink.height()/2; // set .ink position and add class .animate ink.css({ top: y+'px', left:x+'px' }).addClass("animate"); }) })(jQuery);

Related: See More

Vue Material Kit
Ripple Dot Animation
Hover Effect Style
Sonar Wave Effect in Circle With CSS

Questions / Comments: