.zp-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:12px 18px; text-decoration:none; font-weight:860; letter-spacing:.14em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; user-select:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease; -webkit-tap-highlight-color:transparent; isolation:isolate; } .zp-btn__label{position:relative;z-index:2} .zp-btn__fx{ position:absolute; inset:-2px; border-radius:999px; opacity:0; z-index:1; background:var(--grad-sheen); transform:translateX(-120%) skewX(-18deg); } .zp-btn--primary{ background:linear-gradient(180deg,rgba(240,255,107,.92),rgba(199,255,0,.76)); color:rgba(8,10,8,.92); box-shadow:0 18px 70px rgba(0,0,0,.62),0 0 0 1px rgba(240,255,107,.20),0 0 44px rgba(199,255,0,.10); } .zp-btn--primary:hover{ transform:translateY(-1px); filter:saturate(1.12); } .zp-btn--primary:active{transform:translateY(0)} .zp-btn--primary:hover .zp-btn__fx{opacity:1;animation:zp-sheen .9s ease} .zp-btn--ghost{ background:rgba(16,21,20,.55); color:rgba(235,233,223,.86); border-color:rgba(235,241,228,.10); } .zp-btn--ghost:hover{ transform:translateY(-1px); border-color:var(--zp-stroke-2); box-shadow:var(--shadow-neon); } .zp-btn--ghost:active{transform:translateY(0)} .zp-btn--ghost:hover .zp-btn__fx{opacity:1;animation:zp-sheen .9s ease} @media (prefers-reduced-motion:reduce){ .zp-btn{transition:none} .zp-btn__fx{display:none} }