.has-ripple {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ripple {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;

  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

  background: #fff;
  opacity: 1;
}
.ripple-animate {
  -webkit-animation: ripple;
  -o-animation: ripple;
  animation: ripple;
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@-o-keyframes ripple {
  100% {
    opacity: 0;
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2);
  }
}