# Mouse Cursor Tracking Hover Effect in JavaScript.

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1628681413648/5400495Ds.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_](https://www.instagram.com/_creocodigo_/)  for more amazing animations.

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