varz29 / button-ripple-effect

Ripple Effect

This is a simple css only and js approach for implementing Material design ripple effect animation.

I have made both the versions of ripple animation.

Css only Approach

  <button type="button" class="ripple ripple-light btn-style1">Button</button>

Javascript Approach (pure js without jquery)

  <button type="button" class="ripple ripple-light btn-style1">Button</button>

Both approaches might look similar but if you look properly they arent same.

Css only approach starts the ripple effect from the middle of the button no matter where u click on the button

Js approach start the ripple effect from the point where u click on the Button

• There is an extra class ripple-light and ripple-dark this is for the color of the ripple effect

• This is not limited to button tag u can add it in almost any tag