Customizable Material Action Button with jQuery and CSS3

A small jQuery plugin that helps you to create a Android L or Material Design styled action button with a configurable ripple click effect based on CSS3 transitions.

Basic usage:

1. Create the html for the action button.

<div class="action-button">Click Me<span></span></div>

2. Style the action button whatever you want.

.action-button {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 20px 32px;
  overflow: hidden;
  background: #E95546;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 5px;
}

3. Load jQuery library and the jQuery Material Button Click plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="mbclicker.js"></script> 

4. Enable the ripple click effect on the action button.

$(document).ready(function() {
  $('.action-button').mbClicker();
});

5. Config the ripple click effect.

// maximum size of the ripple effect
size: 300, 

// animation speed
speed: 750, 

// color of the ripple effect
colour: 'rgba(0,0,0,0.11)',

// enable shadow on the ripple effect
shadow: false, 

// only use if button doesn't have attr style
buttonAnimation: true 

---

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