Topics

CSS Cursors

This Tutorial will help you how to design mouse pointer.

 

Changing the Look of Cursor

CSS cursor property defines cursor type (i.e., mouse pointer) when the mouse moves over a particular area or a link on the web page. Mostly the browsers display the mouse pointer over any blank part of a web page; the gloved hand is shown over any linked or clickable item, and the edit cursor is displayed over any text or text field. However, CSS lets you redefine these properties to display various types of cursors.

Example :

h1 {
    cursor: move;
}
p {
    cursor: text;
}

Try With Example

 

The different cursors that most browsers accept are exhibited in the table below. You can reveal the cursor by placing your mouse pointer over the "TEST" link in the output column.

LooksValuesExampleOutput
Default Cursor default a:hover{cursor:default;} TEST
Pointer Cursor pointer a:hover{cursor:pointer;} TEST
Text Cursor text a:hover{cursor:text;} TEST
Wait Cursor wait a:hover{cursor:wait;} TEST
Help Cursor help a:hover{cursor:help;} TEST
Progress Cursor progress a:hover{cursor:progress;} TEST
Crosshair Cursor crosshair a:hover{cursor:crosshair;} TEST
Move Cursor move a:hover{cursor:move;} TEST
Custom Cursor url() a:hover {cursor:url("custom.cur"), default;} TEST

 

Creating a Customized Cursor

You can also have completely customized cursors.

The CSS cursor property manages a comma-separated list of user-defined cursor values followed by the generic cursor. In case the first cursor is incorrectly specified or can't be found, then it will use the next cursor in the comma-separated list, and so on until a usable cursor is found.

If the user-defined cursors are not valid or not supported by the browser, then it uses a generic cursor defined at the end of the list. 

Tip: .cur format is the standard format that can be used for cursors. However, it is possible to convert images such as .jpg and .gif into .cur format using the online free image converter software.

Example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Cursors</title>
<style>
       a:hover {cursor:url("/assets/example/CSS/custom.cur"), default;} 
  </style>
</head>
<body>
           <div>
             <h1>Welcome to CSS Cursors Tutorial</h1>
             <hr>
             <a href="https://readytocode.net/">Move mouse over me</a>
             
          </div>
           
</body>

In the example mentioned above, custom.gif and custom.cur is the custom cursor file uploaded to your server space. The default is the generic cursor that will be used if the custom cursor is missing or isn't supported by the viewer's browser.

Warning: 

If you do not define the generic cursor at the end of the list while declaring a custom cursor, then the custom cursor will not render correctly.