DEV Community

Cover image for Changing Cursor with CSS for better UX
Suprabha
Suprabha

Posted on

Changing Cursor with CSS for better UX

The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

There are some cases where the default cursor behaviour from the User Agent Stylesheet doesnโ€™t cut it. In these cases, we ought to change the cursor to something that reflects the expected user interaction on that element.

Checkout all the cursors on codepen ๐Ÿงก

Using a Custom Cursor โ†“

The cursor property is specified as zero or more <url> values, separated by commas. The cursor property does accept SVG files in all its glory but not Gifs.

Yes, you can create your own custom cursor using any images like png, jpg, etc.

<div class="cursors">
  <button class="heart">Heart</button>
  <button class="earth">Earth</button>
  <button class="smile">Smile</button>
</div>
Enter fullscreen mode Exit fullscreen mode
.cursors {
  display: flex;
  flex-wrap: wrap;
}
.heart {
  cursor: url("https://i.imgur.com/K10EMnr.png"), auto;
}
.earth {
  cursor: url("https://i.imgur.com/scE50J2.png"), pointer;
}
.smile {
  cursor: url("https://i.imgur.com/aPPijZC.png"), pointer;
}
Enter fullscreen mode Exit fullscreen mode

Output:

all-cursor

๐Ÿ“ NOTE: The size of the images should not be greater than 32*32 DIP, else you will get the below warning and your image won't work.

cursor-warning

I have used this website for resizing my images.

Reference ๐Ÿง

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป suprabha.me ๐ŸŒŸ Instagram

Discussion (3)

Collapse
afif profile image
Temani Afif

When using an image it's good to also adjust the position to avoid the "offset" effect that may look buggy. You can use url("...") 10 10, auto for example

Collapse
maureento8888 profile image
Maureen T'O

I actually didnโ€™t know about the cursor image sizing, so thank you! ๐Ÿ˜ฏ Also, I heard itโ€™s a minor UX thing to make a โ€œdisabledโ€ mouse cursor when hovering over disabled features (although disabling elements turns out to NOT be that great for accessibility. Do you know if screen readers will register a change in a mouse cursor? ๐Ÿ˜ฏ

Collapse
manuthecoder profile image
Manu

What if dev.to had emoji cursors for the reactions panel?

That would be cool...