Custom cursor with CSS

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!

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

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

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

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  

 

  

 

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

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  

 

  

 

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

Hello guy, any update on this? Same issue here. Thank you very much!

On 3/8/2023 at 2:31 PM, NoonRB said:

Hello guy, any update on this? Same issue here. Thank you very much!

Can you share link to your site? We can take a look