PRODUCTION READY

not production ready

Indicative Link Cursors

Email this page

About

A mouse cursor that better represents the link on hover. Implement custom cursors based on each specific link. This includes social media icon cursors, cursors to indicate link location (#section, internal, external, email etc) background color detection, and cursor size control.

Implement

Step 1. Embed The Script Tag

The implement this code resource, simply and paste this code onto your website:

Step 2. Set Attributes

Set Script Tag Attributes

No items found.

Set Element Attributes

No items found.
You can set the pixel size of the cursor in the data-cursor-size attribute. Available cursor sizes range for 16 - 32.

Demo

Destination Cursor Icon Hover Demo
Facebook https://www.facebook.com/drjordanpeterson
Facebook https://www.facebook.com/drjordanpeterson
Instagram https://www.instagram.com/jake.labate
Instagram https://www.instagram.com/jake.labate
Twitter / X https://twitter.com/labate_jake
Twitter / X https://twitter.com/labate_jake
LinkedIn https://www.linkedin.com/in/jakelabate
LinkedIn https://www.linkedin.com/in/jakelabate
TikTok https://www.tiktok.com/@j.labate
TikTok https://www.tiktok.com/@j.labate
YouTube https://www.youtube.com/@jakelabate
YouTube https://www.youtube.com/@jakelabate
Page section #info
Page section #info
Internal URL https://www.jakelabate.com
Internal URL https://www.jakelabate.com
External URL https://github.com/JakeLabate
External URL https://github.com/JakeLabate
Email jake.a.labate@gmail.com
Email jake.a.labate@gmail.com
Phone (call) Call 203-907-5536
Phone (call) Call 203-907-5536
SMS (text) Text 203-907-5536
SMS (text) Text 203-907-5536

‍

Sizes range from 16px - 32px, but here is just a quick visual reference:

Pixel Sizes Render Size Demo
16px
22px
28px
32px

Code

If you're comfortable with JavaScript, you can add (and potentially alter) the following code directly on your website.

More Code Resources

See All Code Resources

Copy to Clipboard

A very easy to use script tag that allows copy functionality. Additional options include custom copy text and custom cursors.

Favicon Cursors

Set the mouse cursor to the favicons of the link website destination. This searches for the /favicon.icon path, then tries Google's favicon API, then falls back to a 'pointer' cursor.

Indicative Link Cursors

A mouse cursor that better represents the link on hover. Implement custom cursors based on each specific link. This includes social media icon cursors, cursors to indicate link location (#section, internal, external, email etc) background color detection, and cursor size control.