Custom Cursors Grab Attention

Posted October 31, 2011 by Kathy Davie in Author Resources, Building Your Own Website, Marketing

The cursor is that arrow or the I-bar that you chase all over your screen. You click with it. You select text or move boxes out of the way. It’s a useful interface with your computer that you can customize on your website for the whole website, for different categories such as selecting text or images, inserting your cursor into a field when filling out a form, or clicking on links. Other cursors allow you to move, copy, resize, and more. I particularly like using a question mark cursor to give viewers a heads-up that this is a tool tip and not a link.

Grab Viewers’ Attention

Grab their attention by popping up a question mark for links to “help” sections or the timeless hint of a watch to let a viewer know that there might be a short wait. There are cursors that will allow you to “grab” an image or box and “pull” it out of the way. Another cursor indicates that table cells can be copied while another indicates text you can select. If you don’t want people to be able to select text or an image, you can set it up so that no cursor appears.

Set Up a Custom Cursor

The easiest way to set up a custom cursor is to set up the auto cursor in the body of your CSS stylesheet and let the viewer’s browser choose the appropriate cursor. If you have an idea for a custom cursor that is not one of the defaults or you have a preference for one cursor graphic over another, you can apply it to an element such as the <abbr> tag, a context-menu cursor to indicate a pop-up menu, a cursor that indicates that a column or row can be resized, and more.

Return to top

Default Cursors

If your site is about graphics, math, science, etc., you might want a crosshairs as the default cursor, to point up formulas, distance, measurements.

In a form, you might want an extra indicator that the viewer should type by including the ubiquitous I-bar. Or a more subtle grab may use a skinny arrow that points in any one of eight directions.

You can use the cursor in specific situations — I like to use the help cursor over the a.k.a. links to help remind viewers that this is not a link that goes anywhere but functions as a tool tip.

Create the Code

Use a Cursor… CSS HTML
On every web page body {cursor: auto;} You don’t need to do anything else.
For all links (only) a {cursor: pointer;}
For all images (only) img {cursor:move;}
Specific tasks such as tool tips, math problems, zoom in on something…let your imagination soar Using a selector will apply the cursor to every instance of that element without your having to do anything again.
selector{cursor:cursorName; }
abbr{
cursor:
help;
border-bottom:
1.75px dotted #004A3E;
/* green */
}
<abbr title=”also known as
“>
a.k.a.,
</abbr>
Use a class to apply the cursor to specific instances of an element.
.class {cursor:cursorName; }
.math{cursor : crosshair;}

<span class=”math“>
½ + ¼ = ¾
</span>

A cursor can also be applied inline. It’s not a recommended method as tidying it up if you want to change something is such a pain plus it adds that tiny bit more time for the browser to process the code to display your page. It’s not much, but the extras the browser is asked to perform can add up. Still it can be useful.
N/A Yadda, yadda, yadda, then go look at <a href=”#” title=”goes nowhere“><span style=”cursor:grab; cursor:-webkit-grab“>some more stuff</a> yadda

Return to top

Default Cursors Supported on Major Browsers

The default cursors are listed below, and you don’t need to worry about uploading graphics or any of that pesky stuff. They include:

Category Cursor Description & Code
Hover your cursor over the cursor’s name
General

auto

The browser determines which cursor to display for the given context.
Compatible with Chrome 1.0, Firefox 1.0, Firefox OS X and Linux 1.5, IE 10.0, Opera 10.6, Safari 3.0, and OS X and Linux 1.0
.class { cursor: auto; }

default

The default cursor
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: default; }

none

No cursor will show up
Compatible with Chrome 5.0, Firefox 3.0, IE 9.0, andSafari 5.0.
Not supported in Opera
.class { cursor: none; }
Links

context-menu

Cursor that indicates that a context-menu is available, IF you’ve set up a pop-up.
Not supported in Firefox or Chrome
A.k.a., contextual, shortcut, and popup or pop-up menu
.class { cursor: context-menu; }

pointer

It’s a pointer and indicates a link
Compatible with Chrome 1.0, Firefox, 1.0, IE 6.0 (requires a .CUR file), Opera 7.x, Safari 1.2
Firefox, Chrome, and Safari require an image, ideally a 24-bit alpha-transparent PNG.
χ and γ are optional in Firefox, Chrome, and Safari otherwise all three browsers assume the position of the pointer is at 0 0
IE 5.0 and 5.5 used hand instead of pointer

Maintain cross-browser compatibility by styling the CSS with:
selector {
cursor: pointer;
cursor: hand;
}
Selecting

alias

Indicates an alias of something is to be created or shortcut to something that is to be created.
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.alias { cursor: alias; }

cell

The cursor indicates that a cell (or set of cells) may be selected
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.class { cursor: cell; }

copy

Indicates something is to be copied
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.class { cursor: copy; }

crosshair

Renders as a crosshair, a very faint, perfectly square in dimensions, cross
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: crosshair; }

text

Indicates that the viewer can edit or add text
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: text; }

vertical-text

Indicates vertical-text that may be selected
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor: vertical-text; }
Moving

all-scroll

Indicates that something can be scrolled in any direction
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor: all-scroll; }

grab

Indicates that something can be grabbed
Compatible with Chrome 1.0 (use -webkit in addition), Firefox 1.5 (use -moz in addition), and Safari 4.0.
Not supported in IE or Opera.
This particular cursor needs reinforcement with -webkit, so be sure to include it in your css.
.class { cursor: grab; cursor: -webkit-grab; }

grabbing

Indicates that something can be grabbed
Compatible with Chrome 1.0 (use -webkit in addition), Firefox 1.5 (use -moz in addition), and Safari 4.0.
Not supported in IE or Opera.
This particular cursor needs reinforcement with -webkit, so be sure to include it in your css.
.class { cursor : grabbing; cursor: -webkit-grabbing; }

move

Indicates that something is movable
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: move; }
Resize

col-resize

Indicates that the column can be resized horizontally
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor: col-resize; }

row-resize

Indicates that the row can be resized vertically
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor: row-resize; }

e-resize

Indicates that an edge of a box can be moved to the right (east)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: e-resize; }

ew-resize

Indicates a bidirectional resize cursor
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.class { cursor: ew-resize; }

n-resize

Indicates that the edge of a box can be moved up (north)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: n-resize; }

ne-resize

Indicates that the edge of a box can be moved up and to the right (northeast)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: ne-resize; }

nw-resize

Indicates that the edge of a box can be moved up and to the left (northwest)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: nw-resize; }

nesw-resize

Indicates a bidirectional resize cursor
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.class { cursor: nesw-resize; }

nwse-resize

Indicates a bidirectional resize cursor
Compatible with Chrome 1.0, Firefox 1.5, IE 10.0, Opera 10.6, and Safari 3.0.
.class { cursor: nwse-resize; }

s-resize

Indicates that the edge of a box can be moved down (south)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor: s-resize; }

se-resize

Indicates that the edge of a box can be moved down and to the right (southeast)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor:se-resize; }

sw-resize

Indicates that the edge of a box can be moved down and to the (southwest)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor:sw-resize; }

w-resize

Indicates that the edge of a box can be moved left (west)
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor:w-resize; }
Status

help

Indicates that help is available
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
.class { cursor:help; }

no-drop

Cursor showing that a drop is not allowed at the current location.
On Windows and Mac OS X, “no-drop is the same as not-allowed”.
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor:no-drop; }

not-allowed

Indicates that the requested action will not be executed
Compatible with Chrome 1.0, Firefox 1.5, IE 6.0, Opera, 10.6, and Safari 3.0.
.class { cursor:not-allowed; }

progress

Indicates that the program is busy
Compatible with Chrome 1.0, Firefox, 1.0, IE 6.0 (requires a .CUR file), Opera 7.x, Safari 1.2
Firefox, Chrome, and Safari require an image, ideally a 24-bit alpha-transparent PNG.
χ and γ are optional in Firefox, Chrome, and Safari otherwise all three browsers assume the position of the pointer is at 0 0
IE 5.0 and 5.5 used hand instead of pointer
.class { cursor:progress; }

wait

Indicates that the program is busy
Compatible with Chrome 1.0, Firefox 1.0, IE 4.0, Opera 7.0, Safari 1.2
Zoom

zoom-in

Indicates that something can be zoomed in
Compatible with Chrome 1.0 (use -webkit in addition), Firefox 1.0 (use -moz in addition), Opera 11.6, and Safari 3.0 (use -webkit in addition).
Not supported in IE
This particular cursor needs reinforcement with -webkit, so be sure to include it in your css.
.class { cursor:zoom-in; cursor : -webkit-zoom-in; }

zoom-out

Indicates that something can be zoomed out
Compatible with Chrome 1.0 (use -webkit in addition), Firefox 1.0 (use -moz in addition), Opera 11.6, and Safari 3.0 (use -webkit in addition).
Not supported in IE
This particular cursor needs reinforcement with -webkit, so be sure to include it in your css.
.class { cursor:zoom-out; cursor : -webkit-zoom-in; }
Custom

custom

Allows you to use any image you want for a cursor
Always include a “default” as a backup in case your image fails.
Not supported in Opera.
IE requires a .CUR file
Firefox, Chrome, and Safari require an image, ideally a 24-bit alpha-transparent PNG.
χ and γ are optional in Firefox, Chrome, and Safari otherwise all three browsers assume the position of the pointer is at 0 0

.custom {
cursor : url(“http://kddidit.com/images/webBackEnd/bulletLeaf.png”) x y, auto;
}

url

A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
Compatible with Chrome 1.0, Firefox 1.5, Firefox OS X, 4.0, IE 6.0, and Safari 3.0
Not supported in Opera

.custom {
cursor:url(leaf.png),url(myBall.cur), auto;
}

Return to top

Create a Custom Cursor

Then, of course, for those of you who like a truly custom effect, you can always create your own cursor using an image file. Most of the major browsers support CUR, PNG, GIF, and JPG file formats (IE6+; Firefox 1.5+, Safari 3+).

The ideal cursor size is 32px by 32px. If you are using PNGs, keep the size within a power of two to avoid problems. Yes, you can make it bigger, but it will require using JavaScript.

Of course, if you’re using WordPress (only the .org WordPress), you’ll need to use a plugin to activate your cursor. There are several options, including the GitHub jQuery Awesome Cursor plugin which uses either FontAwesome icons as custom CSS cursors or your own custom icon font. The Custom Pointers Plugin for WordPress allows you to create interactive tutorials for users.

A word of caution with plugins. Check to be sure the plugin is being maintained and updated as well as compatible with the latest version of WordPress.

CSS Code Analysis
a.note:hover {
cursor: url(‘http://kddidit.com/images/bullets/bulletLeaf.gif’), nw-resize;
}
a.note:hover allows me to create a class and choose which links will display a leaf cursor in the hover state.
:hover indicates a pseudo-class
{ indicates the start of an element tag.
cursor is a property declaration telling the browser the following value will be used for a cursor.
url(‘ indicates the enclosed is an address.
http://….gif is the absolute path where this image file is stored.
‘) closes the url.
, separates the url from my choice of one of the standard cursors recognized by almost all the browsers. This tag will not work if you don’t include the comma.
nw-resize is a standard cursor. It serves as a fallback in case the image file is corrupted or not available. It’s a good idea to always provide backup.
} indicates the end of an element tag.
HTML Code Analysis
<a class=”note” href=”#“>truly custom effect</a> <a tells the browser the following is a link.
class=”note” tells the browser it should reference “note” in the CSS stylesheet to see what changes must be made.

href=”…” tells the browser the text enclosed by the quotation marks is the address.
# is a placeholder. It allows the enclosed text, “truly custom effect”, to look like a link (see the link in the earlier paragraph).
> ends the first half of the address.
truly custom effect is the visible text.
</a> ends the address.

Fun With Your Website is…

…an opportunity to do a bit more with your author’s website or blog and have some fun with it. All while learning something about html and CSS — the easy way, lol.

If you found this post on custom cursors interesting, consider tweeting it to your friends. Subscribe to KD Did It, if you’d like to track this post for future updates.

Return to top

Legend:

  Bright pink is the selector coding
  Blue is the property and HTML tag coding
  Orange is the information particular to your requirements, the value
  Green indicates a hyperlink tag
  Gray indicates a comment tag

Leave a Reply