Waves effect

Bootstrap waves effect

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

By default, waves are added to buttons, masks, and navbar links as in the examples below.

Example

Click me
Sample image with waves effect.
Edit in sandbox 
        
            

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

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

Customization

You can also add waves effect to any element in two ways:

Via a css class:

Edit in sandbox 
        
            

        <!--".waves-effect" class ads a regular wave to the element-->
        <a class="btn btn-primary waves-effect">Button with waves</a>

        <!--".waves-light" class ads a "lighter" version of the waves-->
        <a class="btn btn-primary waves-light">Button with waves</a>

Via JavaScript:

Edit in sandbox 
        
            

        <!--For a regular waves-->
        Waves.attach('.btn', ['waves-effect']);

        <!--For a lighter version of waves-->
        Waves.attach('.btn', ['waves-light']);