Der 300-Millionen-Knopf 

<!-- Pill button · metic.studio · Million-Dollar Details EP 01 -->
<a class="pill" href="#start">
  <span class="pill__glow" aria-hidden="true"></span>
  <span class="pill__label">Start a project</span>
  <span class="pill__dot" aria-hidden="true">
    <svg viewBox="0 0 256 256" width="16" height="16" fill="currentColor">
      <path d="M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z"/>
    </svg>
  </span>
</a>

<style>
  .pill {
    --ink: #121214; --paper: #f4f4f2; --accent: #ff3e3e; --lens: cubic-bezier(.23, 1, .32, 1);
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
    height: 52px; padding: 0 8px 0 24px; border-radius: 999px;            /* size + shape */
    background: var(--ink); color: var(--paper);                          /* color */
    font: 500 15.2px/1 "Space Grotesk", system-ui, sans-serif;            /* type */
    text-decoration: none; white-space: nowrap; transition: scale .16s var(--lens);
  }
  .pill:active { scale: .97; }                                            /* press */
  .pill__glow {                                                           /* light */
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .16), transparent 60%);
    transition: opacity .35s var(--lens);
  }
  .pill__label { position: relative; }
  .pill__dot {                                                            /* signal */
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: #fff; transition: transform .35s var(--lens);
  }
  .pill__dot svg { transition: transform .35s var(--lens); }
  @media (hover: hover) and (pointer: fine) {                             /* hover */
    .pill:hover .pill__glow { opacity: 1; }
    .pill:hover .pill__dot { transform: translate(2px, -2px); }
    .pill:hover .pill__dot svg { transform: rotate(45deg); }
  }
  .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .pill, .pill * { transition-duration: .01ms !important; } }
</style>

<script>
  // Light follows the cursor + magnet with a spring (stiffness 220, damping 18, mass .6, strength .32)
  document.querySelectorAll('.pill').forEach((el) => {
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches
    const K = 220 / .6, C = 18 / .6, S = .32
    let tx = 0, ty = 0, x = 0, y = 0, vx = 0, vy = 0, raf = 0, last = 0
    const frame = (now) => {
      const dt = Math.min(.032, (now - (last || now)) / 1000) || 1 / 60; last = now
      vx += (K * (tx - x) - C * vx) * dt; vy += (K * (ty - y) - C * vy) * dt
      x += vx * dt; y += vy * dt
      el.style.translate = `${x.toFixed(2)}px ${y.toFixed(2)}px`
      if (Math.abs(tx - x) + Math.abs(ty - y) + Math.abs(vx) + Math.abs(vy) < .1) { raf = 0; last = 0; return }
      raf = requestAnimationFrame(frame)
    }
    const wake = () => { if (!raf && !still) raf = requestAnimationFrame(frame) }
    el.addEventListener('pointermove', (e) => {
      const r = el.getBoundingClientRect()
      el.style.setProperty('--mx', `${e.clientX - r.left}px`)
      el.style.setProperty('--my', `${e.clientY - r.top}px`)
      if (e.pointerType !== 'mouse') return
      tx = (e.clientX - (r.left - x + r.width / 2)) * S
      ty = (e.clientY - (r.top - y + r.height / 2)) * S
      wake()
    })
    el.addEventListener('pointerleave', () => { tx = 0; ty = 0; wake() })
  })
</script>