DEV Community

Cover image for 3 Steps to create a custom cursor with HTML, CSS and JavaScript
Shefali
Shefali

Posted on • Edited on • Originally published at shefali.dev

2

3 Steps to create a custom cursor with HTML, CSS and JavaScript

Introduction

Have you ever come across a website with a unique and eye-catching cursor?

Custom cursors offer a brilliant opportunity to infuse your web projects with personality and interactivity. Implementing a custom cursor not only elevates the user experience but also serves as an expression of your brand’s personality.

In this blog, we will learn the steps of creating a custom cursor using HTML, CSS and JavaScript.

Let’s start!

Set Up Your HTML File

Let’s create a basic HTML structure to start with.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Cursor</title>
</head>
<body>
    <!-- To create the cursor -->
    <div class="cursor"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Add CSS

Next, let’s add CSS to style the custom cursor.

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

.cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: green; 
    border-radius: 50%; 
    pointer-events: none; /* Ensure the custom cursor doesn't interfere with content */
}
Enter fullscreen mode Exit fullscreen mode

Implement JavaScript

Now for the cursor to work with the user’s mouse movement, we have to implement JavaScript.

// Get the cursor
const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", function (e) {

cursor.style.left = e.clientX + "px";

cursor.style.top = e.clientY + "px";

});
Enter fullscreen mode Exit fullscreen mode

Putting It All Together

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Cursor</title>
    <style>
      body {
        cursor: none; /* Hide the default cursor */
      }

      .cursor {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: green;
        border-radius: 50%;
        pointer-events: none; /* Ensure the custom cursor doesn't interfere with content */
      }
    </style>
  </head>
  <body>
    <!-- To create the cursor -->
    <div class="cursor"></div>
    <script>
      // Get the cursor
      const cursor = document.querySelector(".cursor");

      document.addEventListener("mousemove", function (e) {
        cursor.style.left = e.clientX + "px";

        cursor.style.top = e.clientY + "px";
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

That’s it! Save your files and open the HTML file in your web browser. You should now see your custom cursor in action.

Thanks for reading.

For more content like this click here!
Buy Me A Coffee

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay