Jump to content

Custom cursor with CSS

Recommended Posts

Site URL: https://www.timkaun.com/

Hello everyone! I'm in the process of renewing my website, now everything is in place and the final icing on the cake would be a custom cursor. In the best case with the function that he inverts as a circle the place in the background. But even just a custom cursor (circle) would be awesome.

For this I have already searched many forums and tested various codes. Unfortunately none works.

For information: I have a personal plan as a subscription and can therefore only fall back on CSS.

The only thing that worked even rudimentary, was with the following CSS code:

body {

margin: 0;

height: 100vh;

cursor: url(uploaded image), auto;

}

Here, from time to time, the new cursor is shown to me, but when it is, it's only for a fraction of a second.

Does anyone here have any ideas that can help me out?

Thanks in advance!

Link to comment
On 12/31/2021 at 11:49 PM, timk said:

Site URL: https://www.timkaun.com/

Hello everyone! I'm in the process of renewing my website, now everything is in place and the final icing on the cake would be a custom cursor. In the best case with the function that he inverts as a circle the place in the background. But even just a custom cursor (circle) would be awesome.

For this I have already searched many forums and tested various codes. Unfortunately none works.

For information: I have a personal plan as a subscription and can therefore only fall back on CSS.

The only thing that worked even rudimentary, was with the following CSS code:

body {

margin: 0;

height: 100vh;

cursor: url(uploaded image), auto;

}

Here, from time to time, the new cursor is shown to me, but when it is, it's only for a fraction of a second.

Does anyone here have any ideas that can help me out?

Thanks in advance!

Can you share your url of cursor you want to apply?

I test on my own and it works properly

image.thumb.png.acad4ab0c7f7e51fd670e3443a26a1b9.png

Here is my code to apply it

body {
  cursor: url(https://static1.squarespace.com/static/56eadb72d51cd4a1f93f5e10/t/61cf76479673080e2fa33a8f/1640986183767/CursorFinal.png), auto;
}

a, a:hover {
  cursor: url(https://static1.squarespace.com/static/61c85989f94e5e0edb575c12/t/61d1d85c8e186f78e94df4a3/1641142364245/cursor_filled.png), auto;
}

The url is my example

Hope it makes sense

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

 

 

thanks for the code!
I replaced it with my cursor and put it under "Design - Custom CSS".

But still it doesn't show me anything....
Only for a fraction of a second the cursor flickers briefly at the edge, have a look at the video.

Any idea?

Here is the cursor url:
https://static1.squarespace.com/static/61c85989f94e5e0edb575c12/t/61d0561a8e186f78e938b57d/1641043482804/timkaun_cursor.png

 

 

 timkaun_cursor.png 

Bildschirmfoto 2022-01-01 um 14.29.02.png

 

Edited by timk
Link to comment
13 minutes ago, timk said:

 

 

thanks for the code!
I replaced it with my cursor and put it under "Design - Custom CSS".

But still it doesn't show me anything....
Only for a fraction of a second the cursor flickers briefly at the edge, have a look at the video.

Any idea?

Here is the cursor url:
https://static1.squarespace.com/static/61c85989f94e5e0edb575c12/t/61d0561a8e186f78e938b57d/1641043482804/timkaun_cursor.png

timkaun_cursor.mov 18.24 MB · 0 downloads  

 

 timkaun_cursor.png 

Bildschirmfoto 2022-01-01 um 14.29.02.png

 

So I have now tried it in another browser. No longer Chrome but Safari. Here it seems to work better, but it still flickers...

Link to comment
On 1/1/2022 at 2:40 PM, timk said:

 

 

thanks for the code!
I replaced it with my cursor and put it under "Design - Custom CSS".

But still it doesn't show me anything....
Only for a fraction of a second the cursor flickers briefly at the edge, have a look at the video.

Any idea?

Here is the cursor url:
https://static1.squarespace.com/static/61c85989f94e5e0edb575c12/t/61d0561a8e186f78e938b57d/1641043482804/timkaun_cursor.png

timkaun_cursor.mov 18.24 MB · 1 download  

 

 timkaun_cursor.png 

Bildschirmfoto 2022-01-01 um 14.29.02.png

 

@bangank36 have you had a chance to take a look? 

Link to comment
  • 1 year later...
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.