Gradient Border Button

<button class="gbb-btn">Premium</button>

@property --gbb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.gbb-btn {
  position: relative;
  padding: 14px 36px;
  background: #0f0f0f;
  color: #e2e8f0;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  isolation: isolate;
}
.gbb-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: conic-gradient(from var(--gbb-angle), #6366f1, #ec4899, #f97316, #6366f1);
  z-index: -1;
  animation: gbb-rotate 3s linear infinite;
}
.gbb-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #0f0f0f;
  border-radius: 8px;
  z-index: -1;
}
@keyframes gbb-rotate {
  to { --gbb-angle: 360deg; }
}