How to make a custom cursor + cursor hover effects
Tags: webdev, tutorial, css, javascript
Published: 2022-12-27 14:38:42

#Introduction
Having a nice design on your website will wow and hook your user into staying on it, one small but popular way of doing that is with a custom cursor. So i'll show you the simplest way to do this with CSS and Javascript. We'll make a circular cursor, but you can also make cursors with different shapes and sizes using svg's, images, or div's! We'll also make cursor trails and hover effects. As an example, check out this codepen! If you hover on the text the cursor turns cyan, hover on the custom cursor heading and it becomes a gradient color, hover on the image the cursor becomes clear, but hover on the menu icon and it'll become a rotating square!

{% codepen https://codepen.io/lensco825/pen/MWBadyx %}
<hr>
#Creating the cursor
You can make your cursor an svg or an image, but for now we'll make a div. We'll make it a small circle by setting the width and height to `15px` and the `border-radius` set to `50%`. Then we set the `background-color` to a dark color like black so it can be noticable on the bright page. We also need to set the `pointer-events` to `none` so the hover effects that we put can work. 
####HTML

```html
<div id="cursor" class="cursor"></div>
```
####CSS
```css
.cursor {
/*The position is fixed so it can stay on screen
even when scrolling*/
    position: fixed;
    width: 15px; 
    height: 15px;
    border-radius: 50%;
    background-color: black;
/*To put it on the center of the cursor*/
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
   /* So the JS can work properly*/
    pointer-events: none;
}

```
<hr>
#Tracking the cursor
Now for the javascript, we'll get the cursor div by catching it with `document.querySelector` to put it in a variable. Next we give it a `mousemove` event listener with a function that has the paremeter `e`.
<br>
Now for the important part, in the function, we'll make two variables that have the mouse event properties **clientX** and **clientY**. These properties are used to track the Y and X coordinates of the cursor. Now we set the custom cursor's top and left location to the X and Y coordinates of the cursor. By doing this the div cursor will always be exactly where the actual cursor is no matter what. We then set the illusion of the div cursor being the real cursor by setting the website's CSS `cursor` property to `none`.
<br>
Then there you have it! That's how you make your own cursor. You can use the same JS for an svg or an image.
####JS
```js
var cursor = document.getElementById('cursor');

document.addEventListener('mousemove', moveCursor)

function moveCursor(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
}
```
####CSS

```css
* {
cursor: none;
/*It is now invisible!*/
}
```
<hr>
#Hover effects
First, we make a class that's for the style of the cursor hover effect. We then make a variable containing the element that'll have the hover effect and then a `mousemove` event listener for it. In the event listener there will be a function that uses `classList.add` to add the cursor hover class to the cursor. Now when we hover on a text or image that we select (like the codepen above) it'll have a different look to it! If you want to remove the style of the cursor when it stops hovering an element you can make another event listener but with the`mouseleave` event and `classList.remove` to remove the cursor hover class.
####CSS
```css
.hover-cursor {
    width: 20px;
    height: 20px;
    background-color: cyan;
    transition: width 0.5s height 0.5s;
}
```
####JS

```js
//To get all the paragraph elements
var text = Array.from(document.querySelectorAll('p'));

text.forEach(text => {
  text.addEventListener('mousemove', function() {
    cursor.classList.add('hover-cursor');
  })
//To remove the class when it doesn't hover the text
  text.addEventListener('mouseleave', function () {
    cursor.classList.remove('hover-cursor');
  })
})
//The color of the circle is now cyan when you hover on text!
```
<hr>
#Conclusion
While i fully know and understand how to make a custom cursor i still don't really know how to make a cursor trail, but hopefully just knowing how to make the cursor and it's hover effects was helpful enough for you. With all this being said hopefully you can make cool svg, div, or image cursors all on your own, and if you want you can comment the cursors that you made!