body { background: #4d3690;}
*{padding:0;margin:0;}
.lists { text-align: center; margin-top: 300px;}
a { text-decoration: none;}
.btn { padding:25px 60px; text-align: center; font-size: 16px; color:#fff;display: inline-block; margin: 0 20px; cursor: pointer; 
  position: relative; overflow: hidden;}
.green { background: #30ea30;}
.red {background: #ea3051;}
.yellow { background: #eab230;}
.blue { background: #3079ea;}
.ripple { position: absolute;top:0;left:0; z-index: 1; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,1);
  -webkit-animation:ripple 1.2s; 
  animation:ripple 1.2s;
}

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

@keyframes ripple{
  0%{ transform:scale(0);opacity: .6}
  100%{ transform:scale(200);opacity: 0}
}