<button class="btn-peri">
  <span class="btn-peri-rim" aria-hidden="true"></span>
  <span class="btn-peri-cross" aria-hidden="true"></span>
  <span class="btn-peri-text">SCAN</span>
</button>

.btn-peri {
  position: relative;
  width: 110px; height: 110px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #0a1a2a 0%,
      #0a3a5a 35%,
      #00d4ff 75%,
      #6ef0ff 100%);
  color: #0a1a2a;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 24px rgba(0,212,255,0.3),
    0 6px 14px rgba(0,0,0,0.4);
}
.btn-peri-rim {
  position: absolute; inset: 12px;
  border: 1.5px solid rgba(0,212,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: btn-peri-pulse 2.4s ease-in-out infinite;
}
.btn-peri-cross {
  position: absolute; inset: 12px;
  pointer-events: none;
}
.btn-peri-cross::before, .btn-peri-cross::after {
  content: '';
  position: absolute;
  background: rgba(0,212,255,0.5);
}
.btn-peri-cross::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.btn-peri-cross::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
}
.btn-peri-text {
  position: relative; z-index: 1;
  background: rgba(0,212,255,0.85);
  padding: 4px 8px;
  border-radius: 2px;
  color: #0a1a2a;
  text-shadow: 0 0 4px rgba(0,212,255,0.4);
}
@keyframes btn-peri-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-peri-rim { animation: none; }
}
.btn-peri:hover {
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 36px rgba(0,212,255,0.55),
    0 6px 14px rgba(0,0,0,0.4);
}