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 data-rippleria class="btn btn-success btn-lg">With default ripple effect</button> <button data-rippleria class="btn btn-default">Default values</button> <h3>A button with custom color</h3> <button data-rippleria data-rippleria-color="rgba(255,255,0,.65)" class="btn btn-danger">With custom color - duration</button> <h3>Button with custom easing and color</h3> <button data-rippleria data-rippleria-color="rgba(0,111,0,.55)" data-rippleria-easing="ease-in-out" class="btn btn-info">With custom color - duration</button> <h3>Button with custom easing, color and long duration</h3> <button data-rippleria data-rippleria-color="rgba(255,128,255,.45)" data-rippleria-easing="ease-in-out" data-rippleria-duration="2000" class="btn btn-primary">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> </body> </html>
A demo of creating ripple effect
With default ripple effect
Default values
A button with custom color
With custom color - duration
Button with custom easing and color
With custom color - duration
Button with custom easing, color and long duration
With custom color - duration