Mouse cursor gradient shadow effect-CSS examples

The gradient follows the hover effect of the mouse cursor.

HTML CODE:

<button class="mouse-cursor-gradient-tracking">
    <span>Hover me</span>
</button>

CSS CODE:

.mouse-cursor-gradient-tracking {
    position: relative;
    background: #7983ff;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    border: none;
    color: white;
    cursor: pointer;
    outline: none;
    overflow: hidden;
}
    .mouse-cursor-gradient-tracking span {
        position: relative;
    }
 
    .mouse-cursor-gradient-tracking::before {
        --size: 0;
        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, pink, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
    }
 
    .mouse-cursor-gradient-tracking:hover::before {
       --size: 200px;
    }

 SCRIPT CODE:

<script type="text/javascript">
    var btn = document.querySelector('.mouse-cursor-gradient-tracking')
    btn.onmousemove = function (e) {
        var x = e.pageX - btn.offsetLeft
        var y = e.pageY - btn.offsetTop
        btn.style.setProperty('--x', x + 'px')
        btn.style.setProperty('--y', y + 'px')
    }
</script>

Description

To-do list

note!

If the element's parent has a positioning context ( position: relative ), you also need to subtract its offset.

var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop