css ripple

by satantx

HTML

<div class="container">
<h1 class="heading">Material Design Ripple Effect</h1>
<center>
<a href="#" class="ripple btn">Ripple Effect</a>
</center>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,600');

body{
  background-color: #E4E3D3;
  font-family: 'Josefin Sans', sans-serif;
}

.heading{
  text-align:center;
  font-size:55px;
  color:#2E2D4D;
  margin:50px auto;
}
.btn{
  display:inline-block;
  padding:15px 40px;
  border-radius:4px;
  box-shadow:2px 2px 2px rgba(0,0,0,0.5);
  background-color: #020122;
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  cursor:pointer;
  margin:auto;
  text-decoration:none;
}
.ripple{
  position: relative;
  overflow:hidden;
}

.ripple-effect{
  display:inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height:0;
  width:0;
  border:2px solid rgba(255,255,255,0.3);
  border-radius:5000px;
  animation:ripple 1s ease forwards;
  z-index:1;
}
@keyframes ripple{
  0%{
    transform:scale(0);
  }
  100%{
    transform:scale(100);
  }
}

JavaScript

$(".ripple").on("click",function(event){
$(this).append("<span class='ripple-effect'>");
$(this).find(".ripple-effect").css({
   left:event.pageX-$(this).position().left,
    top:event.pageY-$(this).position().top
  }).animate({
    opacity: 0,
  }, 1500, function() {
   //$(this).remove();
  });
});