Materialize CSS Wave Effect

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.

To create wave effect, add .waves-effect class to the HTML element i.e (button (<button>) or hyperlink element (<a>)) base class.
Wave Effect
```
   <a class="waves-effect" href="#">Wave Effect</a>    
   
```
To provide wave effect color, add .waves-* class to the HTML element class.
Wave Effect
```
<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

General Syntax

<a class="waves-effect waves-light" href="#">Wave Effect</a>
<button class="waves-effect waves-light">Wave Effect</button>

Try It Now

Source Code

Download

<div class="row">
  <div class="col s12">
    <a class="waves-effect blue waves-light btn" href="#!">Click Here ! </a>
  </div>
</div>

Try it yourself

Source Code : Output

Click Here !

Circular Wave

Follow the following steps to create circular waves.

Assign .wave-effect class to the HTML element such as button (<button>) or hyperlink element (<a>) base class.
Wave Effect
```
<a class="waves-effect" href="#">Wave Effect</a>
    
```
At the end, assign .waves-circle class to the HTML element such as button or link element to create circular waves.
Circular Wave
```
<a class="waves-effect waves-circle" href="#">Wave Effect</a>
    
```

General Syntax

<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

Download

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

Try it yourself

Source Code : Output

Tooltip Position : Left

To place tooltip in the left direction, use data-position="left" attribute to the <a> or button i.e <buton> element.

General Syntax

<a class="btn tooltiped" data-position="left" data-tooltip="Tooltip general description">Hover me!</a>

Try It Now

Source Code

Download

<a class="btn tooltiped" data-position="left" data-tooltip="Hey, i am tooltip.">Hover me!</a>

Try it yourself

Source Code : Output

Hover me!

Tooltip Position : Bottom

Assign data-position="bottom" attribute to the button or hyperlink element to place the tooltip direction into bottom.

General Syntax

<a class="btn tooltiped" data-position="bottom" data-tooltip="Tooltip general description">Hover me!</a>

Try It Now

Source Code

Download

<a class="btn tooltiped" data-position="left" data-tooltip="I am tooltip.">Hover me!</a>

Try it yourself

Source Code : Output

Hover me!

Tooltip Position : Right

Use data-position="right" attribute to place the tooltip at the right direction.

General Syntax

<a class="btn tooltiped" data-position="right" data-tooltip=" Tooltip general description">Hover me!</a>

Try It Now

Source Code

Download

<a class="btn tooltiped" data-position="right" data-tooltip=" I am tooltip.">Hover me!</a>

Try it yourself

Source Code : Output

Hover me!

Materialize CSS Wave Effect

Wave Effect

Wave Effect

General Syntax

Source Code

Source Code : Output

Circular Wave

Wave Effect

Circular Wave

General Syntax

Source Code

Source Code : Output

Tooltip Position : Left

General Syntax

Source Code

Source Code : Output

Tooltip Position : Bottom

General Syntax

Source Code

Source Code : Output

Tooltip Position : Right

General Syntax

Source Code

Source Code : Output

Web Tutorials