Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/rippleria/jquery.rippleria.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h3>A demo of creating ripple effect</h3> <button id="btn-ripple1" class="btn btn-success btn-lg">Options set by JavaScript</button> <h3>Setting option in JavaScript</h3> <button id="btn-ripple2" class="btn btn-danger">With custom color - duration</button> <h3>Button 3 with long duration</h3> <button id="btn-ripple3" class="btn btn-info">With custom color - duration</button> </div> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/rippleria/jquery.rippleria.min.js"></script> <script> $('#btn-ripple1').rippleria({ duration: 750, easing: 'linear', color: "#FFFF00", detectBrightness: true }); $('#btn-ripple2').rippleria({ duration: 1500, easing: 'linear', color: "#0000FF", detectBrightness: true }); $('#btn-ripple3').rippleria({ duration: 2000, easing: 'ease-in-out', color: "#FF8000" }); </script> </body> </html>
A demo of creating ripple effect
Options set by JavaScript
Setting option in JavaScript
With custom color - duration
Button 3 with long duration
With custom color - duration