How to Style Your Cursor with CSS3

There are so many different ways to style your cursor using CSS3. Most developers probably know about cursor: pointer, but what about the dozens of other ways to have your cursor appear? What follows is a list of some of the most useful cursor styles. Combine them with the :hover pseudo-selector for your styling to take effect once the designated HTML element has been hovered upon.

Crosshair

This will make your cursor render as a crosshair symbol.

Wait

This will render your cursor as an animated icon (the spinning ball we’re sadly all so familiar with) to indicate that the user has to wait for the program to catch up, or that something is in progress.

Alias

When your cursor is rendered as an alias icon, that usually means that an action can be performed that will create an alias or a copy of something.

Copy

The description of the copy function probably sounds very similar to alias, but the icons for each value are very different. While the alias icon is a curved arrow, the copy symbol is a cursor with a ‘plus’ icon attached, indicating that something can be copied.

Zoom

The zoom-in and z00m-out values are pretty self explanatory. Zoom-in is an icon with a plus in the center, while zoom-out is the same icon but with a minus in the center.

*cursors may render differently on different browsers.