Smart External Link Cursor Icon with CSS

Posted on

You’ve probably seen a few websites with an external link icon next to their external links, I’ve tried to implement a smart solution for this on images as well as links, and today it came to me, add the icon to the cursor. When you hover over a link, you usually wait a few ms to see if the “pointer” cursor appear, this solution will hopefully be equal to the traditional visible icon. Here’s how to implement it to your website.

Creating the External Link Cursor

I took a pointer cursor, and added an external link icon to it. Really!

External Link Cursor CSS

If you use target=”_blank” for your external links, you can target them like this:

a[target="_blank"] {
    cursor: url("/images/external-cur.png"), -moz-zoom-in;
}

Tested in Firefox and Chrome.

Let me know what you think in the comments below.

thumbnail cursor credit: PSDGraphics.com

Founder of Rushtips.com.