DEV Community

Cover image for Creating a custom cursor for your website

Creating a custom cursor for your website

Bridget Amana on September 07, 2024

I’ve been working on my portfolio website to showcase my work, and I wanted it to stand out with a touch of personality. I thought, “Why not add a ...
Collapse
 
imkrunalkanojiya profile image
Krunal Kanojiya

Great work!! This types of small things are so required and its not easy to find best clean and source. So keep posting this type of necessary things. Also if you don’t mind I would like to suggest you please attach demo. So it will help us to understand, how actually output looks like…🙌🏻🤘🏻

Collapse
 
ashutosh_dev profile image
Ashutosh_dev

Try to attach some demo link.

Collapse
 
bridget_amana profile image
Bridget Amana

Thank you for the tip
I’ve added a demo link

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

Interesting guide Bridget, thanks for sharing!

I'd just like to suggest Cute Cursors extension, for those who just want to have a custom cursor anywhere :)

Collapse
 
engrsakib profile image
Md Nazmus Sakib

very informative

Collapse
 
bridget_amana profile image
Bridget Amana

Thank you 😊

Collapse
 
wizard798 profile image
Wizard

Wow, very good,

Collapse
 
bridget_amana profile image
Bridget Amana

Thank you 😊

Collapse
 
parker_elie_2770b4dbce6fb profile image
Parker Elie

really cool!!

Collapse
 
badcat profile image
BadCat Design • Edited

*Fun! *
Perhaps the cursor: none should go on html instead of body, like this... so if the body isn't full height the default cursor doesn't show up?
html {
cursor: none;
}

IDK if that has any other issues in doing it that way?

demo

Collapse
 
armando_ota_c7226077d1236 profile image
Armando Ota

specially cool for people with disabilities