<a href="https://reactgo.com" target="_blank" class="animated-button">
  <span>Start Coding</span>
</a>
body{
  background: #000000e8;
  max-width:500px;
  margin: 4rem auto;
  text-align:center;
  height:100vh;
  overflow:hidden;
}

.animated-button{
    font-size: 1rem;
    font-weight: 400;
    text-decoration:none;
    color: #ffff;
    cursor: pointer;
    background-image: linear-gradient(164deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange);
    border-radius: 3px;
    padding:14px 3px; /* it helps to increase border width*/
}

.animated-button span{
  background: black;
  color: #ffff;
  padding:11px 30px; /* it helps to increase button width and height*/
  height:100%;
}

.animated-button:hover{
  animation: bordermove .7s linear infinite
}

@keyframes bordermove{
  0%{
    background-image: linear-gradient(114deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange);
  }
  
  25%{
     background-image: linear-gradient(124deg,orange,#b1b1ea,#c1b562,#b4b783,#bb46a7);
  }
  
  50%{
    background-image: linear-gradient(134deg,#b4b783,#bb46a7,orange,#c1b562,#b1b1ea);
  }
  
  75%{
    background-image: linear-gradient(144deg,#b4b783,#b1b1ea,orange,#bb46a7,#c1b562);
  }
  
  100%{
    background-image: linear-gradient(114deg,#c1b562,#b4b783,#b1b1ea,orange,#bb46a7);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.