Button Purse AniMation

hover시, 버튼 주변에 그림자 생성

 

  <a href="#" class="button">Learn More</a>

.button {
  display: inline-block;
  color: #3c67e3;
  text-decoration: none;
  padding: 20px 50px;
  border: 3px solid #3c67e3;
  border-radius: 10px;
}

.button:hover {
  animation: pulsate 1s ease-in-out;
}

@keyframes pulsate {
  0% {
    box-shadow: 
        0 0 25px #5ddcff,
        0 0 50px #4e00c2;
  }
}