Bootstrap waves effect

Just add mdbWavesEffect to your elements.

NOTE: mdbRippleRadius is now deprecated. Instead of it, please use mdbWavesEffect.

Basic example

Click me
Sample image with waves effect. 

<!--Button with wave-->
<a class="btn btn-primary btn-lg waves-light" mdbWavesEffect>Click me</a>

<!--Mask with wave-->
<div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).jpg" class="img-fluid" alt="Sample image with waves effect.">
    <a href="#">
        <div class="mask waves-effect"></div>
    </a>
</div>

Customization

You can change waves effect color to "lighter", adding waves-light:


<!-- Normal -->
<a class="btn btn-primary btn-lg" mdbWavesEffect>Click me</a>

<!-- Lighter --> 
<a class="btn btn-primary btn-lg waves-light" mdbWavesEffect>Click me</a>

Disable waves

You can disable waves effect by removing mdbWavesEffect directive from your element.