.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translatez(0);
}
.ripl {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
}
.ripl {
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.ripl.animate {
  -webkit-animation: ripple-effect 0.8s linear;
  -o-animation: ripple-effect 0.8s linear;
  animation: ripple-effect 0.8zzs linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-moz-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-ms-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}
@-o-keyframes ripple-effect {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5);
    transform: scale(3.5);
  }
}