Waves
Materialize is a modern responsive CSS framework based on Material Design by Google.
Introduction
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
.