Анимация на кнопке,помощь

body { background: cadetblue } 
.btn { margin-bottom: 20px !important; } 
.btn { 
  position: relative; 
  margin: 0 auto; 
  text-align: center; 
  line-height: 72px; 
  font-size: 20px; 
  color: #fff; 
  cursor: pointer; 
  max-width: 423px; 
  width: 100%; 
  background-color: #c7a17b; 
  border-radius: 36px; 
  font-family: Arial; 
  overflow: hidden; 
} 
 
.btn-outline { 
  width: 100%; 
  background: rgba(0,0,0,.25); 
  border: 2px solid #c7a17b; 
} 
 
.btn-small { 
  line-height: 42px; 
  min-height: 42px; 
  font-size: 16px; 
  max-width: 323px; 
  border-radius: 23px; 
} 
 
.btn-animate:after { 
  content: ''; 
  display: block; 
  width: 300px; 
  height: 300px; 
  position: absolute; 
  background: #FFFFFF; 
  border-radius: 50%; 
  top: 100px; 
  left: auto; 
  right: auto; 
  animation: btn-animate 5s infinite; 
} 
 
@keyframes btn-animate { 
    0%  { left: -50%; opacity: .5 } 
    25% { left: -25%; top: -200px; width: 600px; height: 600px; opacity: 0 } 
    26% { left: auto; top: 100px; opacity: 0 } 
    50% { left: auto; right: -50%; top: 100px; width: 300px; height: 300px; opacity: .5 } 
    75% { left: auto; right: -25%; top: -200px; width: 600px; height: 600px; opacity: 0 } 
    76% { left: auto; right: auto; top: 100px; width: 300px; height: 300px; opacity: 0 } 
}

<div class="btn btn-animate"> 
  StackOverflow 
</div> 
<div class="btn btn-outline btn-small btn-animate"> 
  StackOverflow 
</div>