Bootstrap waves effect

Just add mdbWavesEffect to your elements.

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


Basic example


<!--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.

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Waves Effect:
// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'