:root {
  --black: #000000;
  --black-soft: #111;
  --gold: #eba000;
  --gold-glow: rgba(235, 160, 0, 0.35);
  --text-muted: #cfcfcf;
  --coal: #000000;
}

.animated-border-btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 1.5px;
  text-decoration: none;
  overflow: hidden;
  background: transparent;
  border: 5px solid transparent; /* optional base border */
}

.animated-border-btn:hover {
  color: var(--black);
}

/* The four moving border lines */
.animated-border-btn span {
  position: absolute;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.animated-border-btn span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  animation: animateTop 3s linear infinite;
}

.animated-border-btn span:nth-child(2) {
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  animation: animateRight 3s linear infinite -0.75s;
}

.animated-border-btn span:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  animation: animateBottom 3s linear infinite -1.5s;
}

.animated-border-btn span:nth-child(4) {
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  animation: animateLeft 3s linear infinite -2.25s;
}

/* Keyframes */
@keyframes animateTop {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes animateRight {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes animateBottom {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes animateLeft {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}