It is a simple jQuery and CSS3 code you can put on your html page quickly implement material click like ripple effect on various element.
Simply load material-click.js
and material-click.css
then ripple effect will be applied to all element which has .ripple-effect
class.
Here's how it looks. Try clicking it:
Here's the code:
<div class="box ripple-effect"></div>
There are few things that can be customized:
By default, the dimension of the ripple effect mimics the dimension of the clicked area. However, there's a case where you'll want it to mimic the parent of the clicked element's dimension instead of the clicked element's dimension.
For example:
Here's the code:
<div class="box-wrapper"> <div class="box ripple-effect" data-ripple-limit=".box-wrapper"></div> </div>
By default, the color of the ripple effect is rgba( 0, 0, 0, 0.3)
. You can change it using custom data attribute data-ripple-color=""
:
Here's the code:
<div class="box ripple-effect" data-ripple-color="#009688"></div>
You can implement border-radius by using data-ripple-wrap-radius=""
:
Here's the code:
<div class="box ripple-effect" data-ripple-color="#009688" data-ripple-wrap-radius="50%"></div>
If you need more customization, you can add custom classes to the ripple effect's wrapper to further modify your ripple effect's shape using CSS. Simply add data-ripple-wrap-class=""
to the clicked element:
Download Material Click on GitHub.