Material Design Ripple effect

Material Design Ripple effect with jQuery and CSS

Check out the live example at CodePen

Installation

NPM

material-ripple is available as an npm package

$ npm install material-ripple

How to use it

You need to include the CSS and JS resources located in the dist folder. Don't forget to include jQuery as well.

<link rel="stylesheet" href="ripple.min.css">

<div class="material-ripple">
  <span>My Account</span>
</div>

<script src="jquery.min.js"></script>
<script src="ripple.min.js"></script>

Styling

You can change the ripple color with the data-ripple-color attribute:

<div class="material-ripple" data-ripple-color="#3498db">
  <span>Settings</span>
</div>

Or you can use CSS:

.red-ripple > .material-ink {
  background-color: red;
}

NOTE: Static positioned elements appear behind absolutely positioned siblings (.material-ink in this case) so you should set position: relative; to child elements inside .material-ripple to bring them above .material-ink.

For example if you have an HTML structure like this:

<div class="material-ripple">
  <span>Dashboard</span>
</div>

Make the span elements relatively positioned like this:

.material-ripple > span {
  position: relative;
}

Bonus

Material Design Cards and Box Shadow by Samuel Thornton CodePen link

You can choose from 5 different shadow level (from 1 to 5).

<div class="material-card material-shadow-1">
  ...
</div>

License

MIT © Balint Soos