7. CSS Rotating Gradient Border Line on Button

Source code:

CSS:

a::before {
    content: "";
    z-index:-1;
    display: block;
    position: absolute;
    transition: opacity .3s ease;
    background: conic-gradient(from calc(var(--r) - 80deg) at var(--x) 50%, #222 0%, #fff 20%, #222 25%);
    animation: -0.64s rotating2 3s linear infinite, -0.64s x 3s linear infinite;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

a::after {
    content: "";
    z-index:-1;
    display: block;
    position: absolute;
    background-color:#111;
    right:2px;
    bottom:2px;
    top:2px;
    left:2px;
}
@keyframes x {
    0% {
      --x: 74px;
    }
    32.82275711% {
      --x: 206px;
    }
    50% {
      --x: 206px;
    }
    82.82275711% {
      --x: 74px;
    }
    100% {
      --x: 74px;
    }
}
@keyframes rotating2 {
    0% {
      --r: 0deg;
    }
    24.5928339% {
      --r: 0deg;
    }
    50% {
      --r: 180deg;
    }
    75.4071661% {
      --r: 180deg;
    }
    100% {
      --r: 360deg;
    }
}


HTML: