Bridget Amana

Posted on Sep 7

Creating a custom cursor for your website

#webdev #javascript #beginners #tutorial

I’ve been working on my portfolio website to showcase my work, and I wanted it to stand out with a touch of personality. I thought, “Why not add a custom cursor to make the experience a bit more exciting?” so, I decided on a sleek, circular cursor that would follow the mouse. If you’re looking to give your website a similar unique touch, follow along as I show you how to create a custom circle cursor using a bit of CSS and JavaScript.

Step 1: Set Up Your HTML

To start, we’ll set up a basic HTML structure and include a div element that will serve as our custom cursor. This will allow us to style and position it as needed.

Add the following code to your html:

<body>
    <h1>Custom circle cursor</h1>
    <!-- The div below is what is needed -->
    <div class="custom-cursor"></div>
    <script src="script.js"></script>
</body>

Step 2: Style the Cursor with CSS

Now, let’s style our div to look like a stylish circle cursor. We’ll hide the default cursor and apply custom styles to the new div.

Create a CSS file named styles.css and include the following code:

/* Hide the default cursor */
body {
    cursor: none;
}

/* Style the custom circle cursor */
.custom-cursor {
    position: absolute;
    width: 30px;  
    height: 30px;
    border-radius: 50%;
    border: 1px solid #000;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

Step 3: Move the Cursor with JavaScript

Next, we’ll add JavaScript to make the circle cursor follow the mouse pointer. This step involves updating the position of the div based on mouse movements.

In your Javascript file add the following code:

// Get the cursor element
const cursor = document.querySelector('.custom-cursor');

// Update cursor position based on mouse movement
document.addEventListener('mousemove', (e) => {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
});

Select the Cursor Element: document.querySelector('.custom-cursor'); grabs the div we styled in CSS.
Track Mouse Movement: document.addEventListener('mousemove', (e) => { ... }); listens for mouse movements and updates the cursor’s left and top properties to follow the mouse. e.clientX and e.clientY provide the current mouse coordinates.

Here’s a heads-up: While setting up my custom cursor, I noticed that when viewing my portfolio website with my phone I faced issues with the cursor blocking touch interactions and it just being there. To address this, just add the CSS below and you'll be fine

@media (pointer: coarse) {
    .custom-cursor {
        display: none; /* This hides the custom cursor on touch devices */
    }
}

And there you have it! With just a bit of CSS and JavaScript, you’ve added a personal and interactive element to your website. Feel free to tweak it to your preferred shape, and color, or even add an image as the cursor.
Demo

Top comments (13)

Krunal Kanojiya • Sep 8

Great work!! This types of small things are so required and its not easy to find best clean and source. So keep posting this type of necessary things. Also if you don’t mind I would like to suggest you please attach demo. So it will help us to understand, how actually output looks like…🙌🏻🤘🏻

Ashutosh_dev • Sep 7

Try to attach some demo link.

Bridget Amana • Sep 7

Thank you for the tip
I’ve added a demo link

Hossein Yazdi • Sep 9

Interesting guide Bridget, thanks for sharing!

I'd just like to suggest Cute Cursors extension, for those who just want to have a custom cursor anywhere :)

Md Nazmus Sakib • Sep 8

very informative

Bridget Amana • Sep 8

Thank you 😊

Wizard • Sep 8

Wow, very good,

Bridget Amana • Sep 8

Thank you 😊

Parker Elie • Sep 9

really cool!!

BadCat Design • Sep 10 • Edited

*Fun! *
Perhaps the cursor: none should go on html instead of body, like this... so if the body isn't full height the default cursor doesn't show up?
html { cursor: none; }
IDK if that has any other issues in doing it that way?

demo