<button class="btn">CLICK ME</button>
body {
  display: grid;
  place-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
:root {
  --borderColor: skyblue;
}
.btn {
  padding: 6px;
  font-size: 1.4em;
  position: relative;
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border-radius: 6px;
  background: var(--borderColor);
  border: none;
  color: #fff;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  display: block;
  border: 2px solid var(--borderColor);
  z-index: -2;
  border-radius: inherit;
  animation: clippath 3s linear infinite;
}
.btn:after {
  animation-delay: -1.5s;
}
@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }
  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.