Introduction
Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.
WaveApplying 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.
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.
// 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
.