<button class="btn-copper">
  <span class="btn-copper-rim" aria-hidden="true"></span>
  <span class="btn-copper-text">Mint</span>
</button>

@property --btn-copper-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-copper {
  position: relative;
  width: 96px; height: 96px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8b878 0%, #b87333 55%, #6a3f15 100%);
  color: #3a2410;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 2px 3px rgba(255,255,255,0.4),
    0 6px 14px rgba(0,0,0,0.3);
  --btn-copper-angle: 0deg;
  transition: --btn-copper-angle 4s linear, transform 0.18s ease;
}
.btn-copper-rim {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: conic-gradient(from var(--btn-copper-angle),
    transparent 0deg,
    #5d8a73aa 30deg,
    transparent 80deg,
    #88a896aa 200deg,
    transparent 260deg,
    #5d8a73aa 320deg,
    transparent 360deg);
  filter: blur(2px);
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 70%);
          mask: radial-gradient(circle, transparent 60%, #000 70%);
}
.btn-copper-text { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,232,180,0.4); }
.btn-copper:hover {
  --btn-copper-angle: 360deg;
  transform: scale(1.04);
}