Bootstrap waves effect

Just add mdbWavesEffect to your elements.

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

Basic example

Click me


<!--Button with wave-->
<a mdbBtn color="primary" size="lg" class="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 mdbBtn color="primary" size="lg"  mdbWavesEffect>Click me</a>

<!-- Lighter -->
<a mdbBtn color="primary" size="lg" class="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, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { WavesModule, ButtonsModule } from 'angular-bootstrap-md'

Import example Modules list