A lightweight javascript library to create some amazing effects for the mouse (cursor) on your website - MagicMouse.js : https://magicmousejs.web.app/

There's more than 4 effects and I'm keep updating now, you can try other effect on https://magicmousejs.web.app/ by changing the example and click to "Try it" button.

MagicMouse.js is a vanilla javascript library so you DON'T need to include any other library like jQuery. You just need to include 2 things to your HTML :

  <link rel="stylesheet" href="dist/magic-mouse.css" />

  <script type="text/javascript" src="dist/magic_mouse.js"></script>

<script type="text/javascript">
    options = {
	"cursorOuter": "circle-basic",
	"hoverEffect": "circle-move",
	"hoverItemMove": false,
	"defaultCursor": false,
	"outerWidth": 30,
	"outerHeight": 30
      };
    magicMouse(options);
</script>

If you want your mouse have elegant hover effect, don't forget to add the class "magic-hover" to the element you want it have hover effect, for example :

  <a class="magic-hover magic-hover__square">download</a>

Magicmouse.js is on the cloud now, you don't even need to download it to your server :

  <link rel="stylesheet" href="https://res.cloudinary.com/veseylab/raw/upload/v1613706377/magicmouse/magic-mouse-1.1.css" />
  <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1613706377/magicmouse/magic_mouse-1.1.js"></script>

You should have the nice effect for your mouse now, of course you can override the CSS code to make it more elegant and suitable with your website (change color, size,..). I'll add more effects to this libs when I have time, sure you can contribute to this repository and I'm very appreciate that ! :)