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

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

.teal-holo-btn{
  /* colour tokens from palette #1 */
  --btn-col:#00e2e2;                   /* text & animated border */
  --btn-border:#7777;                  /* static border */
  --btn-border-anim:#00e2e2;
  --btn-glow:0 0 .08em #072b33;        /* text glow */

  --btn-speed:1.7s;

  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:#0f2a30;
  border:2px solid var(--btn-border); border-radius:100px;
  text-shadow:var(--btn-glow); cursor:pointer; touch-action:manipulation;

  box-sizing:border-box; max-width:calc(100% - 4px);
  -webkit-user-select:none; -ms-user-select:none; user-select:none;

  transition:transform var(--btn-speed) ease,color .3s,text-shadow .3s ease;
  --sweep-progress:0;
}
.teal-holo-btn:hover{ transform:scale(.95); }

.teal-holo-btn::after{
  content:''; position:absolute; inset:-2px;
  border:2.1px solid var(--btn-border-anim); border-radius:100px; 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:0;
}
.teal-holo-btn span{
  position:relative; z-index:2; pointer-events:none;
  -webkit-user-select:none; -ms-user-select:none; user-select:none;
}