Material Design Hover & Click Effects with jQuery and CSS3

Creating cool hover and click effects inspired by Google Material Design using jQuery and CSS3 based animations.

How to use it:

1. Create an action button/link where you want to apply on the hover & click effects.

<a class="ripplelink" href="#">Hover & Click me!</a>

2. Create the CSS styles for the shadow effects when mouse hover.

.ripplelink {
  display: block;
  float: left;
  width: 49.6%;
  margin: 0.2%;
  height: 10em;
  line-height: 10em;
  text-align: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 0;
}

.ripplelink:hover {
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}

3. Create the CSS styles for the ripple effect when clicked on.

.ink {
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.animate {
  -webkit-animation: ripple 0.65s linear;
  -moz-animation: ripple 0.65s linear;
  -ms-animation: ripple 0.65s linear;
  -o-animation: ripple 0.65s linear;
  animation: ripple 0.65s linear;
}

@-webkit-keyframes 
ripple {  100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}

@-moz-keyframes 
ripple {  100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}

@-o-keyframes 
ripple {  100% {
opacity: 0;
-o-transform: scale(2.5);
}
}

@keyframes 
ripple {  100% {
opacity: 0;
transform: scale(2.5);
}
}

4. Include the necessary jQuery javascript library at the bottom of your web page.

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

5. A little jQuery script to enable the hover & click effects.

$(function(){
  var ink, d, x, y;
  $(".ripplelink").click(function(e){
    if($(this).find(".ink").length === 0){
      $(this).prepend("<span class='ink'></span>");
    }
         
    ink = $(this).find(".ink");
    ink.removeClass("animate");
     
    if(!ink.height() && !ink.width()){
      d = Math.max($(this).outerWidth(), $(this).outerHeight());
      ink.css({height: d, width: d});
    }
     
    x = e.pageX - $(this).offset().left - ink.width()/2;
    y = e.pageY - $(this).offset().top - ink.height()/2;
     
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});
});

---

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