buttoninteractiveglowgradientcssjavascripthoverui

Mouse-Tracking Purple Glow Button

Интерактивная кнопка с фиолетовым свечением, следующая за курсором. Идеально для лендингов и UI-акцентов. CSS, JavaScript.

Live Preview

Prompt

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Purple Glow-Follow Button</title>
  <style>
    :root {
      --glow-core: rgba(255, 255, 255, 0.8);
      /* inner white glow */
      --glow-color: rgba(192, 132, 252, 0.35);
      /* soft purple */
      --glow-color-strong: rgba(192, 132, 252, 0.55);
      /* stronger purple */
    }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #0d1117;
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    .glow-btn {
      --x: 50%;
      --y: 50%;
      position: relative;
      appearance: none;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #111827;
      padding: 14px 28px;
      font-weight: 700;
      border-radius: 9999px;
      /* fully round */
      cursor: pointer;
      letter-spacing: .2px;
      transition: transform .2s ease, border-color .2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .08);
      isolation: isolate;
    }

    .glow-btn:hover {
      transform: translateY(-1px);
      border-color: #d1d5db;
    }

    .glow-btn::before,
    .glow-btn::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      /* force circular glow */
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease;
      will-change: background;
      z-index: -1;
    }

    /* Inner glow */
    .glow-btn::before {
      background:
        radial-gradient(90px 90px at var(--x) var(--y),
          var(--glow-core) 0%,
          rgba(255, 255, 255, 0.25) 45%,
          transparent 70%),
        radial-gradient(140px 140px at var(--x) var(--y),
          var(--glow-color-strong) 0%,
          transparent 75%);
      mix-blend-mode: screen;
    }

    /* Outer bloom */
    .glow-btn::after {
      inset: -8px;
      border-radius: inherit;
      background:
        radial-gradient(200px 200px at var(--x) var(--y),
          var(--glow-color) 0%,
          transparent 80%);
      filter: blur(20px);
      z-index: -2;
    }

    .glow-btn:hover::before,
    .glow-btn:hover::after {
      opacity: 1;
    }
  </style>
</head>

<body>
  <button class="glow-btn">Get Started</button>

  <script>
    const btn = document.querySelector('.glow-btn');
  btn.addEventListener('mousemove', (e) => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    btn.style.setProperty('--x', x + 'px');
    btn.style.setProperty('--y', y + 'px');
  });
  </script>
</body>

</html>

All Prompts