How to change the cursor icon on HTML elements

Posted on Jul 30, 2021

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

Photo from Unsplash

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 😉

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.