<div class="btn btn-shiny-border">Shiny Border</div>
  
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
}

:root {
  --primary-color: hsl(196, 78%, 61%);
  --info-color-transparent: #{transparentize(hsl(214, 79%, 65%), 0.9)};
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

.btn {
  &-shiny-border {
    --angle: 0deg;
    --color-1: var(--primary-color);
    --color-2: var(--info-color-transparent);
    --btn-bg: transparent;
    --btn-border-width: 0;
    --btn-radius: 0;

    color: white;
    border: 0.2rem solid;
    border-image: linear-gradient(var(--angle), var(--color-1) 10%, var(--color-2) 50%) 10;
    animation: spin-angle 1.6s linear infinite;
  }
}

@keyframes spin-angle {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.5/dist/aqua.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.