Build Your Own Website: Custom Cursors Grab Attention

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

Build Your Author 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 (hypertext markup language) and CSS (cascading style sheets) — the easy way, lol.

If you found this post on Custom Cursors Grab Attention interesting, consider subscribing to KD Did It, if you’d like to track this post for future updates.

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(“https://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(‘https://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.