Use of Custom Cursors

Use of Custom Cursors

Smart use of Custom Cursors in a web applications can improve the User Experience of an application drastically. So in this article we will get introduced to the use of built-in cursor as well as custom cursor using cursor: CSS property. You can use .png image as a custom cursor image. Also there are some built-in cursors which are dependent on browser and operating system you are using. So, you need to use this property wisely and smartly to work for you.

Built-in Cursors

Following are some built-in cursor properties

/*Default built-in cursors*/
.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Custom Cursors Using Image

Using custom cursors, you can ensure all applications are using the same cursor for a more consistent experience. You can use a .png image as a cursor image. For that there is a simple line of code

/*Image Cursor*/
.image-pointer {
	cursor:url(img/pointer.png), auto;
	}

It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking. If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use.

Tags css, design, html, snippets