How to change mouse cursor with CSS

December 8, 2021

How to change mouse cursor with CSS

In this article we will see in a practical way how to change the mouse cursor with CSS, just using a rule we can change the cursor in any way we want!

change mouse cursor with CSS cover

Hey you programmer, okay? Let’s learn something new?

Watch this content on YouTube:

The on-screen mouse cursor, also known as a mouse pointer, can be easily changed via CSS

And use cases are: we want to make an element clickable but the pointer doesn’t change to the ‘little hand’

Or also a non-editable part of the HTML, we can switch to the lock symbol

And for that, we use the cursor rule, check it out:

.some-element-class {
 cursor: pointer; // switch mouse pointer to a hand

And of course, we have several options for the way you want to use it.

css cursos examples

Here is a screenshot of the ways to change the mouse cursor, we can change the pointer into any of these symbols

Then, with a JavaScript manipulation we can even make the events, so that the symbols make sense

Or for example, an Ajax call we can use the wait, while the request doesn’t come back. Isn’t that cool? 


In this article we learned that we can change mouse cursor with CSS

This rule is called cursor, and its value will determine the symbol that appears instead of the pattern.

And this is linked to an element of our HTML code

Want to learn more about CSS? Click here!

Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x