Materialize Waves

Materialize waves effect is an external library that is included in Materialize to allow us to create the ink effect outlined in Material Design.

Example

Follow the step by step process to create a Materialize waves.

  • To create wave effect, add .waves-effect class to the HTML element i.e (button (<button>) or hyperlink element (<a>)) base class.
    Wave Effect
    
       <a class="waves-effect" href="#">Wave Effect</a>    
       
  • To provide wave effect color, add .waves-* class to the HTML element class.
    Wave Effect
    <a class="waves-effect waves-*" href="#">Wave Effect</a>    
       

There are following available wave effect color classes and their effects.

Class Name Description
waves-effect Wave effect on the control
waves-light White colored wave effect
waves-red Red colored wave effect
waves-green Green colored wave effect
waves-yellow Yellow colored wave effect
waves-orange Orange colored wave effect
waves-purple Purple colored wave effect
waves-teal Teal colored wave effect

General Syntax

    <a class="waves-effect waves-light" href="#">Wave Effect</a>
<button class="waves-effect waves-light">Wave Effect</button>
     
Try It Now

Source Code

     
      <div class="row">
  <div class="col s12">
    <a class="waves-effect blue waves-light btn" href="#!">Click Here ! </a>
  </div>
</div>     
    
Try it yourself

Source Code : Output

Circular Wave

Follow the following steps to create a circular waves.

  • Assign .wave-effect class to the HTML element such as button (<button>) or hyperlink element (<a>) base class.
    Wave Effect
    <a class="waves-effect" href="#">Wave Effect</a>
        
  • At the end, assign .waves-circle class to the HTML element such as button or link element to create circular waves.
    Circular Wave
    <a class="waves-effect waves-circle" href="#">Wave Effect</a>
        

General Syntax

    <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
    <i class="material-icons">add</i>
 </a>
     
Try It Now

Source Code

     
      <div class="row">
  <div class="col s12">
    <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
      <i class="material-icons">add</i>
    </a>
  </div>
</div>     
    
Try it yourself

Source Code : Output

Conclusion

Materialize waves are used to create an ink effect inside the linear or non rectangular shapes. You can use any element to create a wave effect. A linear web effect can be created using the waves-effect and waves-* classes, where * denotes the color name, like red, green, etc.

Circular wave effects can be created using the waves-effect and waves-circle classes.

Web Tutorials

Materialize Waves
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS