Advertisements
I’m looking to recreate the cursor like they have on this website:
They have a cursor which is a circle outline and then when it’s hovering over links the circle is solid.
I’d like to recreate this cursor on my own website using HTML/CSS/Javascript and for it to only show up on desktop (not touchscreens).
>Solution :
They are using cursor css property
body {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000000" width="20px" height="20px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;
height: 100vh;
}
a {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23000000" fill="%23000000" width="20px" height="20px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;
}<a href="#">some link</a>