Glowing CTA Button with Arrow Icon

<div class="slide-up stagger-3 flex flex-col sm:flex-row gap-4 gap-x-4 gap-y-4 justify-start"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; div:nth-of-type(2) &gt; div:nth-of-type(2)">

    <title>Purple Glow-Follow Button</title>
    <style>
        :root {
            --glow-core: rgba(255, 255, 255, 0.8);
            --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;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            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;
            pointer-events: none;
            opacity: 0;
            transition: opacity .2s ease;
            will-change: background;
            z-index: -1;
        }

        .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;
        }

        .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;
        }

        .icon-box {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .icon-box svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
        }
    </style>



    <button class="glow-btn" style="--x: 175px; --y: 19.75px;" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; div:nth-of-type(2) &gt; div:nth-of-type(2) &gt; button:nth-of-type(1)">
                            <span class="icon-box">
                              <!-- Right arrow -->
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(17, 24, 39);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                            </span>
                            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>





 
</div>