@property --sweep-progress { syntax:'<number>'; inherits:true; initial-value:0; }

.white-btn-wrap{
  padding:24px 0;
  text-align:inherit;
}

.white-holo-btn{
  --btn-col:#fff;
  --btn-border:rgba(72,184,168,1);
  --btn-border-anim:#66ffe5;
  --btn-glow:0 0 .08em rgba(102,255,255,.7);
  --btn-speed:1.7s;

    /* base glow */
  --bg-glow-color: rgba(0,226,226,.24);
  --bg-glow-blur: 15px;
  --bg-glow-spread: 2px;
  --bg-glow-y: 2px;

  /* hover glow stays same size, only brighter */
  --bg-glow-hover-color: rgba(0,226,226,.42);

  position:relative;
  display:inline-block;
  margin:8px 0;
  font:400 clamp(10px,3.5vw,14px)/1 'Archivo Black',Arial,sans-serif;
  letter-spacing:clamp(1px,0.6vw,4px);
  padding:clamp(12px,4vw,18px) clamp(18px,6vw,32px);
  text-transform:uppercase;
  white-space:nowrap;

  color:var(--btn-col);
  background:rgba(2,16,20,.9);
  border:1px solid var(--btn-border);
  border-radius:1px;
  text-shadow:var(--btn-glow);
  cursor:pointer;
  touch-action:manipulation;

  box-sizing:border-box;
  max-width:calc(100% - 4px);

  --sweep-progress:0;

  /* same glow always visible */
  box-shadow:
    0 var(--bg-glow-y) var(--bg-glow-blur) var(--bg-glow-spread) var(--bg-glow-color);

  transition:
    transform .35s ease,
    color .3s ease,
    text-shadow .3s ease,
    box-shadow .35s ease;

  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.white-holo-btn:hover,
.white-holo-btn:focus-visible{
  box-shadow:
    0 var(--bg-glow-y) var(--bg-glow-blur) var(--bg-glow-spread) var(--bg-glow-color),
    0px 1px 15px 1px rgba(0, 226, 226, 0.6);
}

.white-holo-btn:active{
  box-shadow:
    0 var(--bg-glow-y) var(--bg-glow-blur) var(--bg-glow-spread) var(--bg-glow-color),
    0px 2px 12px 2px rgba(0, 226, 226, 0.6);
}

.white-holo-btn:active{
  transform:scale(.98);
}

.white-holo-btn::after{
  content:'';
  position:absolute;
  inset:-2px;
  border:1px solid var(--btn-border-anim);
  border-radius:0;
  box-sizing:border-box;
  clip-path:inset(0 calc(100%*(1 - var(--sweep-progress))) 0 0);
  transition:clip-path var(--btn-speed) cubic-bezier(.4,1.5,.5,1.1);
  z-index:1;
  pointer-events:none;
}

.white-holo-btn span{
  position:relative;
  z-index:2;
  pointer-events:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.white-holo-btn span{
  position:relative;
  z-index:2;
  pointer-events:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}