Custom Cursor using CSS

venomsnake - August 21, 2006
4222 views

Have you ever wondered how other sites changed there cursors on their links or throughout the page? Well this tutorial will show you how to change your sites cursor using CSS.

Open up your css file and put this code in there or place this in the head of your body:


a {
cursor: url(customcursor.cur);
}

That code will allow you to link to your own custom cursor, a 16 x 16px image, or you can use a premade cursor with this code:


a {
cursor: crosshair;
}

Which will make this cursor show up on your links.

You can change the above code to a body { } tag to change the cursor for the whole page.

Below are the different cursors you can use:

• cursor: auto


• cursor: crosshair


• cursor: default


• cursor: pointer


• cursor: wait


• cursor: text


• cursor: help


• cursor: move


• cursor: n-resize


• cursor: ne-resize


• cursor: nw-resize


• cursor: e-resize


• cursor: w-resize


• cursor: s-resize


• cursor: se-resize


• cursor: sw-resize

These can get annoying if you use them to much, or the wrong cursor in the wrong spot, but they can also be used for good and make your site more exciting.

0 Comments

Post a Comment

Author

Url

Validation

Comment
Smilies:

BBCode:
[FONT] Arial Arial Black Arial Narrow Book Antiqua Century Gothic Comic Sans MS Courier New Fixedsys Franklin Gothic Medium Garamond Georgia Impact Lucida Console Lucida Sans Unicode Microsoft Sans Serif Palatino Linotype System Tahoma Times New Roman Trebuchet MS Verdana [SIZE] 6pt 8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt [COLOR] Black Sienna Dark Olive Green Dark Green Dark Slate Blue Navy Indigo Dark Slate Gray Dark Red Dark Orange Olive Green Teal Blue Slate Gray Dim Gray Red Sandy Brown Yellow Green Sea Green Medium Turquoise Royal Blue Purple Gray Magenta Orange Yellow Lime Cyan Deep Sky Blue Dark Orchid Silver Pink Wheat Lemon Chiffon Pale Green Pale Turquoise Light Blue Plum White