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.
8 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!