Proximity Glow Button — Cursor Distance Hover Effect

<div class="pg-stage">
  <p class="pg-hint">Move your cursor around the page — the buttons glow brighter the closer you get, even before touching them</p>
  <div class="pg-row">
    <button class="pg-btn" data-radius="260"><span>Deploy now</span></button>
    <button class="pg-btn" data-radius="180"><span>View docs</span></button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #06070d; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.pg-stage { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 40px; }
.pg-hint { font-size: 13px; color: #4b5468; text-align: center; max-width: 380px; }
.pg-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }

.pg-btn {
  position: relative;
  padding: 15px 34px;
  font-size: 15px; font-weight: 700;
  border-radius: 12px;
  background: #12141f;
  border: 1.5px solid #23273a;
  color: #cbd2e1;
  cursor: pointer; font-family: inherit;
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
  /* --pg-glow drives both the border glow (via a radial box-shadow proxy)
     and the ::before ambient halo intensity. It is written from JS as a
     0..1 value based on cursor distance, continuously, not just on :hover. */
  --pg-glow: 0;
  box-shadow: 0 0 calc(var(--pg-glow) * 40px) calc(var(--pg-glow) * 4px) rgba(99,102,241, calc(var(--pg-glow) * 0.55));
  border-color: color-mix(in srgb, #23273a, #818cf8 calc(var(--pg-glow) * 100%));
}
.pg-btn span { position: relative; z-index: 1; pointer-events: none; }

.pg-btn::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(129,140,248,0.9), transparent 70%);
  opacity: var(--pg-glow);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.05s linear;
}

.pg-btn:hover { transform: translateY(-1px); color: #fff; }

// Unlike a normal :hover glow, this button reacts to how close the cursor
// is ANYWHERE on the page — the glow ramps up smoothly as the cursor
// approaches from a distance, well before it actually touches the button,
// using a continuous document-wide mousemove listener and per-button
// distance falloff rather than a boolean hover state.
var buttons = Array.prototype.slice.call(document.querySelectorAll('.pg-btn'));

function update(clientX, clientY) {
  buttons.forEach(function (btn) {
    var radius = parseFloat(btn.dataset.radius) || 200;
    var rect = btn.getBoundingClientRect();
    var cx = rect.left + rect.width / 2;
    var cy = rect.top + rect.height / 2;
    var dx = clientX - cx;
    var dy = clientY - cy;
    var dist = Math.sqrt(dx * dx + dy * dy);

    var t = 1 - dist / radius;           // 1 at center, 0 at radius edge
    t = Math.max(0, Math.min(1, t));
    t = t * t;                            // ease-in: glow builds slowly then accelerates near the button

    btn.style.setProperty('--pg-glow', t.toFixed(3));
  });
}

document.addEventListener('mousemove', function (e) {
  update(e.clientX, e.clientY);
});

document.addEventListener('mouseleave', function () {
  buttons.forEach(function (btn) { btn.style.setProperty('--pg-glow', '0'); });
});