Material Design'ish Hover & Click Effect

index.html

<!-- http://www.google.com/design/ -->
<!-- http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design -->

<div class="wrapper">
  <a class="ripplelink cyan" href="#">Hover & Click me!</a>
  <a class="ripplelink lightgreen" href="#">Hover & Click me!</a>
  <a class="ripplelink amber" href="#">Hover & Click me!</a>
  <a class="ripplelink orange" href="#">Hover & Click me!</a>
</div>

Material Design'ish Hover & Click Effect.markdown

Material Design'ish Hover & Click Effect

A Pen by 440design on CodePen.

License.

script.js

/*jQuery*/

$(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");
});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
 margin:0;
 padding:0;
}

.wrapper {
	display: block;
  width:99.6%;
  margin:0.2%;
}

.wrapper:after {
	content:"";
	display:table;
	clear:both;
}

.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;
}

.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);}
}


.cyan{
  background:#00bcd4;
}

.lightgreen{
  background:#8bc34a;
}

.amber{
  background:#ffc107;
}

.orange{
  background:#ff9800;
}