MeeInk is a jQuery plugin which allows you to easily add material design ink effect to elements when you click them.

Plugin is based on CSS animation what give you good performance including mobile devices.

Check out demo page here.

bower install MeeInk --save

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.mee-ink.js"></script>

<link rel="stylesheet" href="mee-ink.css">

$(document).ready(function() {
    $('.btn').meeInk({
        // options
    });
});

Plugin have several number of options which allows you to customize it as you want.

animationClass: 'mee-ink-animated mee-ink-animation'

Class which triggers to start CSS animation.

elementClass: 'mee-ink-el'

Class that is added to initialized element.

inkClass: 'mee-ink'

Class for ink inside element with styles.

overflowHiddenClass: 'mee-ink-overflow-hidden'

Class will be added if your element don't have overflow: hidden.

positionRelativeClass: 'mee-ink-pos-relative'

Class will be added if your element have position: static, because ink inside element positioned absolutely relative to element.

Found an issue? You are welcome here.