<button class="btn">CLICK ME</button>
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
:root {
    --borderColor: #03A9F3;
}
body {
  display: grid;
  place-content: center;
}
.btn {
  padding: 20px 40px;
  font-size: 1.4em;
  border: none;
  background: 
    linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x,
    linear-gradient(90deg, var(--borderColor) 50%, transparent 0) repeat-x,
    linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y,
    linear-gradient(0deg, var(--borderColor) 50%, transparent 0) repeat-y;
  background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  color: var(--borderColor);
}
.btn:hover {
  animation: move 0.3s infinite linear;
  box-shadow: inset 0 0 10px var(--borderColor);
}
@keyframes move {
  100% {
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.