html tutorial - How to create custom cursor using CSS - html5 - html code - html form



Answer: Use the CSS cursor property

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

    First of all produce cursor image and save it with the extension .gif or .png (for Firefox, Chrome, Safari) and .cur for (for web Explorer). the pointer pictures can apply the cursor property with a comma-separated list of URLs inform. And finish this list with a generic cursor like default, pointer, etc. like within the example below.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>CSS Custom Cursor</title>
      <style type="text/css">       
          a{
              cursor: url("pointer.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>

      Check out the tutorial on CSS Cursors to learn more about cursors.


      Related Searches to How to create custom cursor using CSS