Waves

Introduction

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

Wave

Applying Waves

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

                
<a class="waves-effect waves-light btn-large" href="#">Wave</a>

Customization

There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class.

Available Classes

To use these, just add the corresponding class to your button. Play around with changing the background color of buttons and the waves effect to create something cool!

                    
<a href="#!" class="btn waves-effect">Send</a>

DefaultSend

waves-lightSend

Call programmatically

We've added the ability to create a Wave on a specific HTMLElement programmatically. Here you can set a custom color and position. Click on the Button to test it out.

.wave-demo


// Trigger a red Wave from center programmatically
M.Waves.renderWaveEffect(
  document.querySelector('.wave-demo'), // Target Element
  null, // Position {x, y}
  {r: 255, g: 0, b: 0} // RGB Color
);

Circle

If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the waves-circle in addition to waves-effect.

HTML Markup



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

Default

waves-light

Materialize is a modern responsive CSS framework based on Material Design by Google.