In this tutorial, I will show you how to get a custom mouse cursor, from the image (SVG or PNG) of your choice, or just a circle with a bit of text in it.
In the rest of this article, for simplicity and to differentiate between the normal, default mouse cursor, I will call it the mouse pointer.
The styling for everything is customizable: the size of the mouse pointer, it's color, transparency, shadow, font family and font size, etc.
The normal, default mouse cursor can still be displayed, or you can remove it when a mouse pointer is used over such or such elements.
The instructions in the article will be slightly related to Elementor, however the code is universal, and will work with any other page builders, as well as outside of WordPress.
Simply add the code on your page, adjust the settings, and you are good to go.
See the demo here:
Features:
- Style it your way: colors, images, fonts, blend modes, it's all easily customizable
- Performance-optimized: works smoothly for visitors with older computers as well
- Default custom mouse pointer: optionally, you can set a default, page-wide mouse cursor, that will be applied on page load
- Flexible code: mix images, plain colors, gradients and texts mouse pointers
- Works by CSS selector, allowing to target precisely the elements you want*
- Coded in vanilla JavaScript: no dependencies
- Universal code: works on all platforms
*In the demo, you will see the "read more" circle showing up only when the mouse is hovering a link area, in the Elementor Posts element. I targeted all the <a> elements within the .elementor-posts element. Much better than showing "read more" even in between Posts, or over areas where clicking won't open the article!
This tutorial requires familiarity with CSS selectors, as well as being able to write simple CSS values, for properties such as font-family, font-size, background-image, etc.
Let's get started!
First, copy paste this code in your page
This is a premium tutorial. Purchase access to unlock the full tutorial.
15 Responses
Hello there! All works fine, but I want to ask you if is it possible to add a little follow dot to the cursor when it's on normal state... thanks!
Hello,
Is it possible to put lotties url ?
Hey Corentin!
No, sorry that can't really work here... The performance (CPU wise) would probably be problematic too if that was a lottie in there...
Hello Maxime,
How can we make the image move smoothly?
Exemple : https://greensock.com/forums/topic/35897-smooth-movement-cursor-image-on-hover-element/
Hey Corentin!
You can try with this kind of CSS, adjust as you wish:
.ehow_mouse {
transition:transform 0.18s;
}
Although I would not really recommend it here... not great for UX. That GSAP example still has the default cursor, so if you use this I think you should keep the default cursor as well probably...
Thank's !
Hey, this is working great, but in safari, the images render blurry. Any quick fix for this?
Thanks,
Greetings tpf!
Sorry, this is a problem with how Safari renders things... I actually already have code in place to improve this. But it has limitations and can't make it perfect because of Safari's rendering.
Here is the technicalities if you want to try and improve this:
You make the icon larger using the width and height properties (by modifying the original CSS provided), and then instead of using a mix of transform:scale(2) and transform:scale(1) (let's say), you use a mix of transform:scale(1) and transform:scale(0.5).
That will improve the rendering in Safari, however this comes at a relatively significant performance cost (CPU performance, not page load). You will see that on all browsers, it won't be quite as smooth.
Here I did a lot of tests already and tried to find a good harmony between performance and look.
Another way would be to limit the size you make the cursors. instead of making them size: 3 or size:4, stick with size:2 or less.
I hope this helps!
Cheers!
Thanks for this, yeah thought this might be the case... All good, managed to tweak with smaller items etc etc.
One last question, is there a way of telling the cursor not to appear on a certain elements, ie go back to default?
Got an external cookie notification, and the always on cursor is causing it to disappear sometimes on the cookie notification.
Thanks,
Don't worry about this, z-index issue...
Thanks,
Hello Maxime, thanks for providing this, it works great! I just have one question: Is there a way to move the custom cursor so that it's positioned slightly off? Because right now the pointer covers most of the message. The desired effect would be to position it slightly above the pointer (As you can see in this example: https://fleava.com/journal). I tried to use "transform: translateY(n);", but that didn't work. Also when moving the cursor there's a little delay so it appears to be a little more smooth. Any idea?
Thanks in advance!
Hey Lukas!
To make it smoother, try adding this CSS:
.ehow_mouse { transition: transform 0.4s cubic-bezier(.26,.94,.31,.97); }To change it's position, towards the end of the code you will see this:
.ehow_mouse { position: fixed; top: 0; left: 0; etc..Play with the "top" value here, ie top:-10px;
Cheers!
Hey Maxime!
That was exactly what I was looking for! Perfect, thank you 🙂
Cheers.
Hey Maxime!
I'm just wondering if I can achieve the popular "glass effect" with this (example: https://efirmedia.com/cases)? I came across the css rule "backdrop-filter", but it seems that it doesn't work here. Is there another solution?
Using just the filter property isn't working as it blurs out the circle as well. My goal is to achieve the effect that only the background becomes blurred.
Any idea?
Thanks,
Lukas
Hey Lukas!
I added support for this property in the code, and I added instructions on it in the tutorial.
Cheers!