jQuery Rippleria

Installation

bower i -S rippleria

<head>
    ...
    <link rel="stylesheet" href="/bower_components/rippleria/css/jquery.rippleria.min.css">
</head>

<body>
    ...
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/bower_components/rippleria/js/jquery.rippleria.min.js"></script>
</body>

Usage

<button data-rippleria class="btn btn-primary">Dark</button>
<button data-rippleria class="btn btn-default">Light</button>

<button data-rippleria
data-rippleria-color="rgba(100,178,53,.35)"
data-rippleria-duration="1000"
data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)"
class="btn btn-default">Custom</button>

<div class="text-center">
    <a style="display: inline-block;" id="rippleria" href="#">
        <img src="http://www.lovethispic.com/uploaded_images/15163-Pretty-Girl.jpg" alt="image">
    </a>
</div>

<script>
    $('#rippleria').rippleria({
        // aniamtion speed
        duration: 750,
        // custom easing effect
        easing: 'ease-in'
    });

    $('#rippleria').click(function(e) {
        e.preventDefault();

        var randInt = function (min, max) {
        var rand = min + Math.random() * (max - min)
        rand = Math.round(rand);
        return rand;
    };

    $(this).rippleria('changeColor',
            'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5));
    });
</script>