Google Material Design Click Effect using jQuery and CSS3

File Size: 38.6 KB
Views Total: 3836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.