Custom CSS Cursor

Hello everyone, as of today’s requirement, I m posting the code for custom CSS Cursor with the help of CSS and JavaScript. This tutorial is for everyone who needs to change the cursor into a custom CSS cursor. We can change our cursor with the help of the only CSS, and no images are required to create a custom CSS cursor.

Custom CSS cursor using CSS and Javascript

The cursor is one of the most important parts of any design. It’s what your audience interacts with, and it can make or break a design.

A lot of designers will use stock cursors that are provided by their browsers. But this often results in an unoriginal experience for users. With the help of JavaScript, you can customize your cursor to match your brand! 

In this blog post, I’ll show you how to create a custom CSS cursor with just a few lines of code and some simple steps!

Cursors are usually arrow shapes, but they can also be other shapes like an hourglass. Why not make your own custom cursor? It’s easy!

Curious to learn how? Keep reading.

Do you want to design your own custom CSS cursor?

I have a tutorial for that. It can be as simple or complex as you want, depending on what the target audience is.

First, remove the default cursor by using the custom CSS cursor property. We use the body or universal selector for removing the default cursor like this. And create a custom CSS cursor.

custom cursor | custom css shapes
*{cursor : none}

or we can try it on body selector to.


body{cursor : none}

By using this selector in CSS, our default cursor is removed. Now we use some CSS custom shapes for creating a cursor. Here I m creating a heart shape for the cursor, so we need to add to this code in css


#cursor{position: absolute;  animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
.cursor:before,
.cursor:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: transparent;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
transition: 0.5s
}
.cursor:after{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
transition: 0.5s
}
@keyframes stretch {
0% {
transform: scale(.3);
}
50% {
transform: scale(2.5);
}
100% {
transform: scale(1.5);
}
}

By adding this code in CSS, we got a heart shape, and Now we need some javascript tricks. So I m posting here how to change the cursor using javascript.


 window.onmousemove = animateMouse;
    setInterval(pageReload, 3000)
    function pageReload() {
        setTimeout("location.reload(true);", 2);
    }

Here I used window.onmousemove event for use mouse moving. Then I pass a function animateMouse to this event, which is used for adding heart CSS to the mouse cursor. now I just used setinterval to reload the page. Reload method is used for page reloading.


Because the javascript code will work for a while, and then the heart shape will disappear. So I used here a trick in this trick my page is auto-reload after every 3 seconds. Therefore my heart shape is working fine every time.


var colorArray = ['#5DD5F2', '#FFE74C', '#FF5964', '#2FD6E2', '#38618C', '#087E8B', '#34344A', '#D1495B', '#4A4063', '#F7F9F9'];

I set multiple colors, which are used for creating random body colors while I move my cursor on the body area.


var a =  colorArray[Math.floor(Math.random()*colorArray.length)]

Here variable a is used for generating random color from colorArray. Which gives a random color every time. If you don’t need random color, you just add a single color to this colorway variable.


document.body.style.background = a

Now we add some random colors to the body. If you don’t need random on the body, remove the above line from your js code. Let’s began the true game. Now create a function for accessing the mouse cursor. When we use event.client, we need a parameter for passing the mouse’s exact location. So we pass an event parameter to our function.


Whenever we move our mouse, this event.clientX or event.clientY passes a value to the event. Now we need a div element for using the above custom heart shape CSS., so we create an element with the help of javascript. Now we set a class attribute to our div and pass the cursor class which we create in CSS.


Now your code is ready for creating heart shapes into your body. Now we change the cursor color randomly.


    function animateMouse(event) {

        var myObject = document.createElement('div');
        var color = colorArray[Math.floor(Math.random() * colorArray.length)]
        myObject.setAttribute('class', 'cursor')
        document.body.appendChild(myObject);
        myObject.style.left = event.clientX + 'px';
        myObject.style.top = event.clientY + 'px';
        myObject.style.transition = 'all 1s linear 0s'
        myObject.style.left = myObject.offsetLeft + 'px'
        myObject.style.top = myObject.offsetTop + 'px'
        myObject.style.opacity = 0;
var styleElem = document.head.appendChild(document.createElement("style"));
        
styleElem.innerHTML = ".cursor:before, .cursor:after {background:" + color + "}";

}

We cannot access before after in javascript, so we need to document.createlement and add a style tag in the head area. By using document.createelement we create a style tag in the head area and add color to our cursor by using after before. 

Conclusion

Just try this code for fun, don’t add this code into a professional just because this code is generated multiple divs in your document; therefore, your browser might be crashed. And your site will slow response.

So I suggest that you please do not add this code to your professional site. Please comment and tell me your experience. Also, comment if you’re facing any issue in change the cursor using javascript and CSS. Also, share this link with your code lover friends. For tips and tricks, check our site.

Follow us on Facebook

Leave a Comment