Animated Custom Cursor with CSS and vanilla Javascript

Animated Custom Cursor Using HTML, CSS & Javascript
19th Aug 2022
5 mins reading time

01. Intro

In this article I will lead you to the creation of a custom cursor with very few lines of code.
Are you ready? Let’s get started.

02. Setup

First let’s start with the structure of our cursor, a simple div with class .cursor

Very simple isn’t it? Now let’s style it with some CSS, I chose a small square with border radius.

Pay particular attention to the properties I have added to the cursor class, among them are some that are necessary for the cursor to work such as pointer events, z-index, position absolute with transform -50% and transition.

Now we are ready to animate the cursor to follow the mouse pointer.

All we do here is select the cursor and add the event listenter ‘mousemove’ to it, so that whenever our pointer changes position, the function inside is triggered.

Piece of cake!

03. Hover Effect

But we want to add two more effects to it, what do you say?
Well, let’s start with the effect for hovering over links (the anchors)

Let’s prepare the css, add a scale, a small rotation and a background color change

And now it’s javascript’s turn, at each link we have to set an event that adds the ‘hover’ class to our cursor and removes it when we hover out of the link, nothing simpler!

04. Click Effect

Ready for the next effect? Let’s add a style when we left-click anywhere on the page!
Let’s start with setting the style

And now it is the event listener part, again when we click it has to add a class to the cursor and when we finish the click it has to remove it

05. Final Result

See the Pen Custom Cursor – CSS & Javascript by by MirkoDev (@mirkodeveloper-the-bold) on CodePen.

See More..
August 5, 2022

5 HTML tags extremely useful

HTML is definitely the first language a web developer learns early in his or her...

August 22, 2022

Neon Text Effect - Pure CSS 3

01. Structure All you need to get started is a simple div with the class...


If they want it, i want it more.