Materialize CSS wave effect is an external library that is included in Materialize to allow us to create the ink effect outlined in Material Design.
Follow the step by step process to create Materialize CSS wave effect.
.waves-effect
class to the HTML element i.e (button (<button>) or hyperlink element (<a>
)) base class.
<a class="waves-effect" href="#">Wave Effect</a>
.waves-*
class to the HTML element class.
<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 |
<a class="waves-effect waves-light" href="#">Wave Effect</a>
<button class="waves-effect waves-light">Wave Effect</button>
<div class="row">
<div class="col s12">
<a class="waves-effect blue waves-light btn" href="#!">Click Here ! </a>
</div>
</div>
Follow the following steps to create circular waves.
.wave-effect
class to the HTML element such as button (<button>) or hyperlink element (<a>) base class.
<a class="waves-effect" href="#">Wave Effect</a>
.waves-circle
class to the HTML element such as button or link element to create circular waves.
<a class="waves-effect waves-circle" href="#">Wave Effect</a>
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
<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>
To place tooltip in the left direction, use data-position="left"
attribute to the <a>
or button i.e <buton>
element.
<a class="btn tooltiped" data-position="left" data-tooltip="Tooltip general description">Hover me!</a>
<a class="btn tooltiped" data-position="left" data-tooltip="Hey, i am tooltip.">Hover me!</a>
Assign data-position="bottom"
attribute to the button or hyperlink element to place the tooltip direction into bottom.
<a class="btn tooltiped" data-position="bottom" data-tooltip="Tooltip general description">Hover me!</a>
<a class="btn tooltiped" data-position="left" data-tooltip="I am tooltip.">Hover me!</a>
Use data-position="right"
attribute to place the tooltip at the right direction.
<a class="btn tooltiped" data-position="right" data-tooltip=" Tooltip general description">Hover me!</a>
<a class="btn tooltiped" data-position="right" data-tooltip=" I am tooltip.">Hover me!</a>