Google Material Design Click Effect using jQuery and CSS3

Google Material Design Click Effect using jQuery and CSS3
File Size: 38.6 KB
Views Total: 3660
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.