Materialize CSS Waves

Materialize CSS waves are an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.

How To Apply Materialize Wave Effect ?

The wave's effect can be applied to any element. To put the effect of the wave on buttons, you just have to put the class waves-effect on to the buttons. If you want the effect of the wave to be white instead, add both waves-effect, waves-light as classes.

The following table lists the available 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 btn-large" href="#">Wave</a>
    
Try it now

Source Code

          <a class="waves-effect blue waves-light btn" href="#!">Click Here !</a>
        
Try it now

Source Code: Output

Circular Wave

To create a circular wave-circle, add .waves-circle to the link element base class. It displays a circular shape and shows waves-effect.

General Syntax

      <a href="#!" class="waves-effect waves-circle"></a>
    
Try it now

Source Code

          <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: Output

Web Tutorials

Materialize CSS Waves
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4