Material Design Ripple effect with jQuery and CSS
Check out the live example at CodePen
material-ripple
is available as an npm package
$ npm install material-ripple
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>
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;
}
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>
MIT © Balint Soos