Skip to content
Related Articles

Related Articles

Improve Article

How to create custom cursor using CSS?

  • Last Updated : 16 Aug, 2021

Custom cursor enhances the readability of the document and grabs the user attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS and Javascript.

Approach:

  • Hide the default cursor.
  • Define the classes which contains all the animations.
  • Add and remove these classes dynamically when the mouse button is pressed or when the mouse pointer is moved.

Example: 
 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        :root {
            --color: 255, 71, 84;
            --cursor-size: 30px;
        }
 
        * {
            cursor: none;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            margin: 0;
            overflow: hidden;
 
            background: #121212;
        }
 
        .custom-cursor {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
 
            width: var(--cursor-size);
            height: var(--cursor-size);
 
            border: calc(var(--cursor-size)
                        /30) solid #fff;
            border-radius: 50%;
 
            animation: cursor 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor::before {
            content: "";
            display: block;
            width: calc(var(--cursor-size) / 2);
            height: calc(var(--cursor-size) / 2);
 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
 
            border: calc(var(--cursor-size) / 6)
                    solid rgba(var(--color), 0.5);
 
            border-radius: 50%;
 
            animation: cursor-before 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor.click {
            animation: cursor-click 800ms
                normal ease-in-out;
        }
 
        @keyframes cursor {
            from {
                transform: scale(1);
                border-color: #fff;
            }
 
            to {
                transform: scale(1.5);
                border-color: rgb(var(--color));
            }
        }
 
        @keyframes cursor-before {
            from {
                transform: translate(-50%, -50%) scale(1);
                border-color: rgba(var(--color), 0.5);
            }
 
            to {
                transform: translate(-50%, -50%) scale(1.5);
                border-color: rgba(var(--color), 0.75);
            }
        }
 
        @keyframes cursor-click {
 
            0%,
            100% {
                transform: scale(1);
            }
 
            50% {
                transform: scale(2.5);
                border-color: rgb(var(--color));
            }
        }
    </style>
</head>
 
<body>
    <div class="custom-cursor"></div>
</body>
 
</html>

JavaScript code: 
 



javascript




const cursor = document
    .querySelector(".custom-cursor");
 
// Adding the animations when the
// mouse button is clicked
 
window.addEventListener("mousedown", (event) => {
    if (!cursor.classList.contains("click")) {
        cursor.classList.add("click");
 
        setTimeout(() => {
            cursor.classList.remove("click");
        }, 800);
    }
});
 
// Getting the position of the cursor
window.addEventListener("mousemove", (event) => {
    let x = event.pageX - cursor.offsetWidth / 2,
        y = event.pageY - cursor.offsetHeight / 2;
 
    cursor.style.left = `${x}px`;
    cursor.style.top = `${y}px`;
});

Complete Code: 
 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        :root {
            --color: 255, 71, 84;
            --cursor-size: 30px;
        }
 
        * {
            cursor: none;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            margin: 0;
            overflow: hidden;
 
            background: #121212;
        }
 
        .custom-cursor {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
 
            width: var(--cursor-size);
            height: var(--cursor-size);
 
            border: calc(var(--cursor-size)
                        / 30) solid #fff;
            border-radius: 50%;
 
            animation: cursor 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor::before {
            content: "";
            display: block;
            width: calc(var(--cursor-size) / 2);
            height: calc(var(--cursor-size) / 2);
 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
 
            border: calc(var(--cursor-size) / 6)
                    solid rgba(var(--color), 0.5);
 
            border-radius: 50%;
 
            animation: cursor-before 800ms
                infinite alternate ease-in-out;
        }
 
        .custom-cursor.click {
            animation: cursor-click 800ms
                normal ease-in-out;
        }
 
 
        @keyframes cursor {
            from {
                transform: scale(1);
                border-color: #fff;
            }
 
            to {
                transform: scale(1.5);
                border-color: rgb(var(--color));
            }
        }
 
        @keyframes cursor-before {
            from {
                transform: translate(-50%, -50%) scale(1);
                border-color: rgba(var(--color), 0.5);
            }
 
            to {
                transform: translate(-50%, -50%) scale(1.5);
                border-color: rgba(var(--color), 0.75);
            }
        }
 
        @keyframes cursor-click {
 
            0%,
            100% {
                transform: scale(1);
            }
 
            50% {
                transform: scale(2.5);
                border-color: rgb(var(--color));
            }
        }
    </style>
</head>
 
<body>
    <div class="custom-cursor"></div>
    <script>
        const cursor = document
            .querySelector(".custom-cursor");
 
        // Adding the animations when the
        // mouse button is clicked
 
        window.addEventListener("mousedown", (event) => {
            if (!cursor.classList.contains("click")) {
                cursor.classList.add("click");
 
                setTimeout(() => {
                    cursor.classList.remove("click");
                }, 800);
            }
        });
 
        // Getting the position of the cursor
        window.addEventListener("mousemove", (event) => {
            let x = event.pageX - cursor.offsetWidth / 2,
                y = event.pageY - cursor.offsetHeight / 2;
 
            cursor.style.left = `${x}px`;
            cursor.style.top = `${y}px`;
        });
    </script>
</body>
 
</html>

Output:

 

Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :