How to change the cursor icon on HTML elements

Learn how you can change the cursor icon on certain HTML elements

Posted on July 30, 2021


To change the mouse cursor when you hover over a specific element, you need to assign the cursor CSS property to your HTML element.

For example, suppose you want to change the mouse cursor to pointer hand (the one you see when you hover over a button)

This is how you do it:

<h1 style="cursor:pointer;">Hello World</h1>

You will see the cursor changes when you hover over the <h1> element above. It’s as if you’re hovering over a <button> element.

The example code below shows all possible cursor style options for your HTML elements.

Notice how your mouse cursor change as you hover to the specific element below:

See the Pen HTML change cursor icon by Nathan Sebhastian (@nathansebhastian) on CodePen.

And that’s how you can change the cursor for HTML elements 😉

Related articles:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.