CSS cursor Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 87 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The cursor property in CSS is used to specify the type of cursor to be displayed when pointing over an element.

This property helps enhance the user experience by providing visual feedback about the interactive nature of various elements, such as links, buttons, and draggable items.

💡 Syntax

The syntax for the cursor property is straightforward. You can apply it to any element that you want to change the cursor for.

Syntax

Copied

element {
  cursor: value;
}

Here, value can be a predefined cursor keyword, a URL to an image file, or multiple values as a fallback list.

🎛️ Default Value

The default value of the cursor property is auto, which means the browser will determine the cursor type based on the context (e.g., text cursor for text fields, pointer cursor for links).

🏠 Property Values

Value	Description
auto	Default cursor, usually an arrow.
default	Arrow cursor.
pointer	Hand cursor, typically used for links.
text	Text cursor, typically used for text fields.
move	Move cursor, used for draggable items.
wait	Wait cursor, typically a watch or hourglass.
help	Help cursor, usually a question mark.
crosshair	Crosshair cursor.
not-allowed	No entry cursor, typically a circle with a line through it.
url(path), default	Custom cursor defined by a URL to an image file, with a fallback value.

📄 Example

In this example, we'll change the cursor to a pointer when hovering over a button.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS cursor Property Example</title>
  <style>
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Button with Custom Cursor</h1>
  <button>Hover over me!</button>
</body>
</html>

🖥️ Browser Compatibility

The cursor property is supported in all modern browsers. Different cursor types may have varying levels of support, so it's good practice to test your cursor styles across different browsers to ensure they display as expected.

🎉 Conclusion

The cursor property in CSS is a versatile tool for improving the user interface of your website.

By customizing the cursor for different elements, you can provide better visual feedback and enhance the overall user experience. Experiment with different cursor values to see how they can add a polished and intuitive touch to your web projects.