Stronger CTA buttons

Make stronger buttons by animating backgrounds with radial gradients.

I needed a stronger CTA button for my newsletter, and I wanted to look closer at how radial gradients could be animated. Turns out this is one of those areas where browsers don’t quite support it yet. Which is probably why this has become popular.

Here’s what the end result looks like at the time of writing:

Below you can see how I did it. About half of the JS is there only to make the exit animation look nice. A subtle detail that is probably not necessary.

    <form>
        <button type="submit" class="submit">Subscribe</button>
    </form>

    .submit {
        background: radial-gradient(
            circle 400px at var(--x) var(--y),
            rgba(255,94,58,1),
            rgba(255,36,201,1) 100% 100%
        );
        border: 0;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }

    const form = document.querySelector("form");
    const button = document.querySelector(".submit");
    var xPer, yPer;
    var intervalId = null;

    button.addEventListener("mouseleave", (e) => {
        intervalId = setInterval(() => {
            if(xPer > 50){ xPer = xPer -1; }
            if(xPer < 50){ xPer = xPer +1; }

            form.style.setProperty("--x", xPer + '%');
            form.style.setProperty("--y", yPer + '%');
            if(xPer == 50){
                console.log('break')
                clearInterval(intervalId);
                intervalId = null;
                form.style.setProperty("--x", 50 + '%');
                form.style.setProperty("--y", 50 + '%');
            }
        }, 10);
    });

    button.addEventListener('mouseenter', (e) => {
        // If an interval exists, clear it first
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
        }
        // Update position as the mouse moves over the element
        button.addEventListener('mousemove', handleMousemove);
    });

    const handleMousemove = (e) => {
        const { x, y,width, height } = button.getBoundingClientRect();
        xPer =  Math.round((e.clientX - x) / width * 100);
        yPer =  Math.round((e.clientY - y) / height * 100);
        form.style.setProperty("--x", xPer + '%');
        form.style.setProperty("--y", yPer + '%');
    };