Google Material Design Click Effect using jQuery and CSS3

Yet another jQuery plugin for creating CSS3 transition based ripple click effects with mouse interaction on action buttons, inspired by Google's new Material design.

See also:

• Hamburger Button Transition Effect with jQuery and CSS3
• Google Material Design Ripple Effects with jQuery and CSS3
• Material Design Action Button Transition Effect with jQuery and CSS3
• Google Material Design Concept UI Button with jQuery and CSS3
• jQuery Plugin To Add Google Material Design Ripple Animations To Buttons

How to use it:

1. Create an action button on your web page.

<button>Click Me</button>

2. Include jQuery library and the jQuery MAWButton plugin at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/mawbutton.js"></script>

3. The sample CSS to style the action button.

.mawbutton {
  outline: none;
  border: 0px;
  width: 221px;
  height: 54px;
  background-color: #0C9AF2;
  overflow: hidden;
  position: relative;
  border-radius: 9px;
  font-size: 20px;
  letter-spacing: 2px;
  color: white;
  font-family: 'Lobster', cursive;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

4. Create the ripple effect using CSS and CSS3 transitions.

.mawbutton .mawbutton-ripple {
  position: absolute;
  border-radius: 100%;
  width: 0px;
  height: 0px;
  background: rgba(248,248,255, .2);
  transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
}

.mawbutton .mawbutton-ripple-out {
  background: rgba(248,248,255, .0);
  transition: background 150ms ease-out opacity 150ms ease-out;
  -webkit-transition: background 150ms ease-out opacity 150ms ease-out;
  -moz-transition: background 150ms ease-out;
  -o-transition: background 150ms ease-out;
}

.mawbutton .mawbutton-stop {
  -webkit-transition: none !important;
  transition: none !important;
}

4. Enable the ripple effect on the action button when clicked on.

$('button').mawbutton({
speed : 250, // The duration which are given in milliseconds of effect.
scale : 6, // The size how the ripple will scale to in animation.
effect : "ripple", // ripple only in this version
transitionEnd:function(){ // callback when transition ends.
  console.log('end');
}
});

---

This awesome jQuery plugin is developed by yuhua-chen. For more Advanced Usages, please check the demo page or visit the official website.