<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!-- rippler --> <link rel="stylesheet" href="https://rawgithub.com/blivesta/rippler/master/dist/css/rippler.min.css"> <script src="https://rawgithub.com/blivesta/rippler/master/dist/js/rippler.min.js"></script> <div class="container"> <h1>Rippler</h1> <hr> <h3>Click or Touch</h3> <ul class="list-inline site-example-nav"> <li> <a class="btn btn-default rippler rippler-inverse" href="#"> <span class="oi oi-chevron-right"></span>  rippler-inverse </a> </li> <li> <button class="btn btn-primary rippler rippler-default"> <span class="oi oi-star"></span>  rippler-default </button> </li> <li> <a class="btn btn-success rippler rippler-inverse" href="#"> <span class="oi oi-check"></span>  rippler-inverse </a> </li> <li> <a class="btn btn-info rippler rippler-default" href="#"> <span class="oi oi-info"></span>  rippler-default </a> </li> </ul> <ul class="list-inline site-example-nav"> <li> <a class="btn btn-warning btn-lg rippler rippler-inverse" href="#"> <span class="oi oi-warning"></span>  rippler-inverse </a> </li> <li> <a class="btn btn-danger btn-lg rippler rippler-default" href="#"> <span class="oi oi-ban"></span>  rippler-default </a> </li> </ul> <ul class="list-inline site-example-nav"> <li> <a class="btn btn-link rippler rippler-bs-primary" href="#"> <span class="oi oi-star"></span>  rippler-bs-primary </a> </li> <li> <a class="btn btn-link rippler rippler-bs-success" href="#"> <span class="oi oi-check"></span>  rippler-bs-success </a> </li> <li> <a class="btn btn-link rippler rippler-bs-info" href="#"> <span class="oi oi-info"></span>  rippler-bs-info </a> </li> </ul> <ul class="list-inline site-example-nav"> <li> <a class="btn btn-link btn-lg rippler rippler-bs-warning" href="#"> <span class="oi oi-warning"></span>  rippler-warning </a> </li> <li> <a class="btn btn-link btn-lg rippler rippler-bs-danger" href="#"> <span class="oi oi-ban"></span>  rippler-danger </a> </li> </ul> <hr> <p> <a href="https://github.com/blivesta/rippler" class="btn btn-primary btn-lg rippler rippler-default" target="_blank">Rippler GitHub Project</a> <a href="http://git.blivesta.com/rippler" class="btn btn-info btn-lg rippler rippler-default" target="_blank">Rippler</a> </p> <hr> <h3>Browser Support</h3> <ul> <li>IE 10 +</li> <li>Firefox</li> <li>chrome</li> <li>opera</li> <li>safari</li> </ul> </div>

.container { width:768px; margin:40px auto; }

$(document).ready(function() { $(".rippler").rippler({}); $('a[href^=#]').on('click', function(){ return false; }); });