磁吸按钮

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>磁吸按钮</title>
    <style>
      :root {
        --paper: #fbf8f1;
        --card: #fffdf8;
        --ink: #1c2230;
        --ink-2: #4a5163;
        --ink-3: #636877;
        --line: #e6dfd0;
        --dot: #d8d0bf;
        --blue: #2f5bd3;
        --on-blue: #fff;
        --spring: linear(0, 0.062, 0.215, 0.411, 0.615, 0.799, 0.95, 1.059, 1.126, 1.158, 1.161, 1.145, 1.116, 1.083, 1.051, 1.023, 1.001, 0.986, 0.977, 0.974, 0.974, 0.978, 0.983, 0.988, 0.994, 0.998, 1.001, 1.003, 1.004, 1.004, 1);
        --f-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        color-scheme: light;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --paper: #14161b;
          --card: #1e2129;
          --ink: #ece7dc;
          --ink-2: #bab6ac;
          --ink-3: #959aa8;
          --line: #31353f;
          --dot: #2c3039;
          --blue: #8eaaff;
          --on-blue: #14161b;
          color-scheme: dark;
        }
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 18px;
        padding: 32px 16px;
        background: var(--paper) radial-gradient(var(--dot) 1px, transparent 1.2px) 0 0 / 22px 22px;
        color: var(--ink);
        font: 16px/1.7 var(--f-sans);
        text-align: center;
      }
      .row { display: flex; flex-wrap: wrap; gap: 48px; justify-content: center; align-items: center; padding: 40px 0; }

      /* ---------- the button ----------
         JS only writes two numbers, --x and --y (how far the pointer is from the centre, -1..1).
         The body follows a little, the label follows more: that difference reads as depth. While
         the pointer moves the transition is short (it tracks); on leave it is a long spring. */
      .mag {
        --x: 0;
        --y: 0;
        --pull: 14px;
        position: relative;
        padding: 16px 30px;
        border: 0;
        border-radius: 999px;
        background: var(--blue);
        color: var(--on-blue);
        font: 600 16px/1 var(--f-sans);
        cursor: pointer;
        translate: calc(var(--x) * var(--pull)) calc(var(--y) * var(--pull));
        transition: translate 0.9s var(--spring), scale 0.45s var(--spring), box-shadow 0.3s;
        box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--blue) 70%, transparent);
      }
      .mag .t {
        display: inline-block;
        translate: calc(var(--x) * var(--pull) * 0.6) calc(var(--y) * var(--pull) * 0.6);
        transition: translate 0.9s var(--spring);
      }
      .mag.near,
      .mag.near .t { transition-duration: 0.18s; transition-timing-function: ease-out; }
      .mag.near { box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
      .mag:active { scale: 0.94; }
      .mag:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
      .mag.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); --pull: 10px; }
      .mag.round { width: 96px; height: 96px; padding: 0; border-radius: 50%; --pull: 22px; }

      .hint { margin: 0; font-size: 13px; color: var(--ink-3); }
      .hint code { font: 12px var(--f-mono); }
      @media (prefers-reduced-motion: reduce) {
        .mag, .mag .t { translate: none; }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <button class="mag" type="button" data-mag><span class="t">开始使用 →</span></button>
      <button class="mag ghost" type="button" data-mag><span class="t">看看源码</span></button>
      <button class="mag round" type="button" data-mag><span class="t">↗</span></button>
    </div>
    <p class="hint">鼠标靠近，按钮会被「吸」过去，里面的字跟得更多一点；移开时弹回原位。</p>
    <p class="hint">触屏和「减少动态效果」下不动：<code>(hover: hover) and (pointer: fine)</code></p>

    <script>
      // The pull starts this many pixels outside the button and grows towards its centre.
      const REACH = 60;
      const fine = matchMedia("(hover: hover) and (pointer: fine)");
      const still = matchMedia("(prefers-reduced-motion: reduce)");
      const buttons = [...document.querySelectorAll("[data-mag]")];
      let frame = 0;
      let last = null;
      const update = () => {
        frame = 0;
        if (!last) return;
        for (const b of buttons) {
          // The layout box, not the moved one: translate does not change offsetLeft/Top.
          const r = b.getBoundingClientRect();
          const cx = r.left + r.width / 2 - (parseFloat(b.dataset.dx) || 0);
          const cy = r.top + r.height / 2 - (parseFloat(b.dataset.dy) || 0);
          const dx = last.clientX - cx;
          const dy = last.clientY - cy;
          const near = Math.abs(dx) < r.width / 2 + REACH && Math.abs(dy) < r.height / 2 + REACH;
          const x = near ? Math.max(-1, Math.min(1, dx / (r.width / 2 + REACH))) : 0;
          const y = near ? Math.max(-1, Math.min(1, dy / (r.height / 2 + REACH))) : 0;
          const pull = parseFloat(getComputedStyle(b).getPropertyValue("--pull")) || 0;
          b.dataset.dx = String(x * pull);
          b.dataset.dy = String(y * pull);
          b.classList.toggle("near", near);
          b.style.setProperty("--x", x.toFixed(3));
          b.style.setProperty("--y", y.toFixed(3));
        }
      };
      addEventListener(
        "pointermove",
        (e) => {
          if (!fine.matches || still.matches || e.pointerType !== "mouse") return;
          last = e;
          frame ||= requestAnimationFrame(update);
        },
        { passive: true },
      );
      // Leaving the window lets every button spring home.
      document.documentElement.addEventListener("pointerleave", () => {
        last = { clientX: -1e4, clientY: -1e4 };
        frame ||= requestAnimationFrame(update);
      });
    </script>
  </body>
</html>