Custom Mouse Cursors with Complete Styling Control
Get Premium

Custom Mouse Cursors with Complete Styling Control

Element.How also offers premium tutorials! Check them here:

Custom Mouse Cursors with Complete Styling Control

Table of Contents

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.

Custom Mouse Cursors with Complete Styling Control

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Custom Mouse Cursors with Complete Styling Control
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

15 Responses

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

    1. 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...

      2. 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...

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

      1. 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,

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

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

      1. Hey Maxime!

        That was exactly what I was looking for! Perfect, thank you 🙂

        Cheers.

  5. 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

Leave a Reply