Sign in
Log inSign up
Mouse Cursor Tracking Hover Effect in JavaScript.

Mouse Cursor Tracking Hover Effect in JavaScript.

Shikhar Baniya's photo
Shikhar Baniya
·Aug 11, 2021·

2 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to track your mouse cursor over hover with pure JavaScript. Here's a preview - screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

##HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Mouse Tracking</title>
</head>

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

    <script src="script.js"></script>
</body>

</html>

Here we have a button with class "mouse-tracking" and inside that button we have a span tag for applying CSS.

Step - 3: Below is the CSS code for styling.

##CSS

body{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f7fc;
}
.mouse-tracking {
    position: relative;
    background: linear-gradient(45deg, #b74096, #FF726E);
    padding: 1.5rem 3rem;
    font-size: 3rem;
    border: none;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    outline: none;
    overflow: hidden;
}
.mouse-tracking span {
    position: relative;
}
.mouse-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, #fff, transparent);
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
}
.mouse-tracking:hover:before {
    --size: 200px;
}

Step - 4: Below is the JavaScript code which is the most important part in this animation. Here we add an event listener to the class "mouse-tracking" and calculate the radius of our cursor w.r.t. X-coordinate and Y-coordinate using property clientX and clientY.

##JS

let btn = document.querySelector('.mouse-tracking');
btn.addEventListener('mousemove', e => {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  btn.style.setProperty('--x', x + 'px');
  btn.style.setProperty('--y', y + 'px');
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more amazing animations.

If you find this useful, below are some other posts that I am sure you'll love.