Have you ever wondered how the cursor changes as you hover over different elements in a website? Well let me tell you that the science behind it is not too difficult at all! There is a property in CSS called the Cursor Property which allows you to do this.
A cursor even though is a minuscule object compared to the screen space of a webpage, it tells us a lot of things. In a sense, it gives an indication of the current status of the web site. It can tell you whether something you requested for is under progress, or you have to wait or whether you are hovering over a button.
Below are a list of cursor types which you would have probably noticed while surfing the web.
This is the normal shape of a cursor. Known as default
This indicates that you are hovering over an element which can be a button or an image. Known as Pointer
This indicates that something which you requested for is still in progress. Known as Progress
And this indicates that the web page is loading. Known as wait
This is just a few but there are plenty more cursor types which I bet you would have not even seen!
Anyways in order to change the cursor types the code for it is-
And the value can be either-
Would indicate that you are hovering over a button or a url. It has the shape of a hand.
And that’s it for today. Hope you had a pleasant reading!