WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to create custom cursor using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS cursor property

You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor.

First of all create cursor image and save it with the extension .gif or .png (for Firefox, Chrome, Safari) and .cur for (for Internet Explorer). After that apply the cursor property with a comma-separated list of URLs pointing to these cursor images. Finally end this list with a generic cursor such as default, pointer, help, etc. as shown in the following example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
<style>       
    a{
        cursor: url("custom.gif"), url("custom.cur"), default;
    }
</style>
</head>
<body>
    <p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p>
</body>
</html>

Please, check out the tutorial on CSS cursors to learn more about cursors.


Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties