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!

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

<div id="cursor" class="cursor"></div>

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;
}

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.


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.


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

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

* {
cursor: none;
/*It is now invisible!*/
}

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 themouseleave event and classList.remove to remove the cursor hover class.

CSS

.hover-cursor {
    width: 20px;
    height: 20px;
    background-color: cyan;
    transition: width 0.5s height 0.5s;
}

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!

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!