Google Material Design Concept UI Button with jQuery and CSS3

An animated UI button built with jQuery and CSS3 that comes with an interactive ripple animation when clicked on, following the Google's new Material Design concept.

How to use it:

1. Create the Html for a UI button.

<div class="button-demo big">
  Material Design Button
</div>

2. Style the UI button via CSS.

.button-demo { /*general styling for all buttons*/
  font-family: "Roboto";
  color: #244549;
  position: relative;
  background: #31ce74;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  -webkit-box-shadow: 0px 2px 10px 3px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 10px 3px rgba(0,0,0,0.15);
  text-shadow: none;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.button-demo.hovered { /*makes it 'elevate'*/
  -webkit-transform: scale(1.05) !important;
  -ms-transform: scale(1.05) !important;
  transform: scale(1.05) !important;
}

.button-demo.big {
  width: 400px;
  height: 200px;
  font-size: 24px;
  line-height: 200px;
}

3. The required CSS styles for the ripple overlay.

.ripple { /*stylings for the circular overlay*/
  position: absolute;
  border-radius: 100%;
  width: 0;
  height: 0;
  background: rgba(0,0,0, .05);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.notransition { /*used to reset the ripple without an animatiion*/
  -webkit-transition: none !important;
  transition: none !important;
}

4. Include the latest version of jQuery library at the bottom of the page.

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

5. The Javascript to enable the animation.

$(document).ready( function (){
  //appends the overlay to each button
$(".button-demo").each( function(){
   var $this = $(this);
$this.append("<div class='ripple'></div>");
});
  
  
$(".button-demo").click(function(e){
  var $clicked = $(this);
  
  //gets the clicked coordinates
  var offset = $clicked.offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  var width = $clicked.width();
  
  
  var $ripple = $clicked.find('.ripple');
  
  //puts the ripple in the clicked coordinates without animation
  $ripple.addClass("notransition");
  $ripple.css({"top" : relativeY, "left": relativeX});
  $ripple[0].offsetHeight;
  $ripple.removeClass("notransition");
  
  //animates the button and the ripple
  $clicked.addClass("hovered");
  $ripple.css({ "width": width * 2, "height": width*2, "margin-left": -width, "margin-top": -width });
  
  setTimeout(function(){
  //resets the overlay and button
  $ripple.addClass("notransition");
  $ripple.attr("style", "");
  $ripple[0].offsetHeight;
  $clicked.removeClass("hovered");
$ripple.removeClass("notransition");
  }, 300 );
});
});

---

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