@codeswithpankaj

CSS Cursors

By Codes With Pankaj

By Codes With Pankaj

CSS Cursors allow you to change the cursor's appearance when it hovers over specific elements on a webpage. This can enhance user experience by providing visual feedback that indicates the element's functionality. In this tutorial, we will explore the various cursor options available in CSS, along with practical examples.

Table of Contents

  1. What is a Cursor?

  2. CSS Cursor Property

  3. Types of Cursors

    • Basic Cursors

    • Link Cursors

    • Text Cursors

    • Resize Cursors

    • Custom Cursors

  4. Practical Examples

    • Example 1: Default and Pointer Cursors

    • Example 2: Text and Crosshair Cursors

    • Example 3: Custom Cursor

  5. Conclusion

1. What is a Cursor?

A cursor is a visual indicator on the screen that represents the user's point of interaction, typically controlled by a pointing device like a mouse or trackpad. The appearance of the cursor can change based on the context of the interaction, such as when hovering over a link, text, or an interactive element.

2. CSS Cursor Property

The cursor property in CSS allows you to control the appearance of the cursor when it hovers over an element. This property can be applied to any HTML element to change the default cursor behavior.

Syntax:

selector {
  cursor: value;
}

Example:

button {
  cursor: pointer;
}

In this example, when a user hovers over a button, the cursor changes to a pointer, indicating that the button is clickable.

3. Types of Cursors

CSS provides a variety of cursor types that can be used depending on the context of the element.

a. Basic Cursors

Basic cursors are commonly used to indicate different types of interactions. Here are a few examples:

  • default: The default arrow cursor.

  • pointer: A hand cursor, typically used for links or buttons.

  • crosshair: A crosshair cursor, often used for selection.

  • move: Indicates that the element is movable.

Example:

div.default-cursor {
  cursor: default;
}

div.pointer-cursor {
  cursor: pointer;
}

b. Link Cursors

Link cursors are designed for elements like hyperlinks or buttons:

  • pointer: A hand cursor indicating that the element is clickable.

Example:

a {
  cursor: pointer;
}

c. Text Cursors

Text cursors are used when hovering over text or input fields:

  • text: An I-beam cursor indicating that text can be selected or edited.

Example:

input[type="text"] {
  cursor: text;
}

d. Resize Cursors

Resize cursors indicate that the element can be resized. These cursors are often used in resizable containers:

  • n-resize: Indicates that the element can be resized vertically (north).

  • e-resize: Indicates that the element can be resized horizontally (east).

  • nw-resize: Indicates diagonal resizing (northwest).

  • ne-resize: Indicates diagonal resizing (northeast).

Example:

div.resize-box {
  cursor: nw-resize;
}

e. Custom Cursors

You can also define custom cursors by specifying the URL of an image file. This allows for unique cursor designs tailored to your website's theme.

Example:

div.custom-cursor {
  cursor: url('https://www.codeswithpankaj.com/images/custom-cursor.png'), auto;
}

Explanation:

  • The custom cursor is defined by the image URL. If the image is not available or supported, the browser will fall back to the default cursor (auto).

4. Practical Examples

Let's see some practical examples of using CSS cursors.

Example 1: Default and Pointer Cursors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Default and Pointer Cursors Example - codeswithpankaj</title>
  <style>
    .default-cursor {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      cursor: default;
      margin: 10px;
    }
    
    .pointer-cursor {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      cursor: pointer;
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="default-cursor">
  Hover over me for default cursor.
</div>

<div class="pointer-cursor">
  Hover over me for pointer cursor.
</div>

</body>
</html>

Explanation:

  • The first box shows the default arrow cursor.

  • The second box shows the pointer (hand) cursor, typically used for clickable elements.

Example 2: Text and Crosshair Cursors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text and Crosshair Cursors Example - codeswithpankaj</title>
  <style>
    .text-cursor {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      cursor: text;
      margin: 10px;
    }
    
    .crosshair-cursor {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      cursor: crosshair;
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="text-cursor">
  Hover over me for text cursor.
</div>

<div class="crosshair-cursor">
  Hover over me for crosshair cursor.
</div>

</body>
</html>

Explanation:

  • The first box shows the text cursor (I-beam), indicating editable text.

  • The second box shows the crosshair cursor, often used for precision tasks like selecting areas.

Example 3: Custom Cursor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Cursor Example - codeswithpankaj</title>
  <style>
    .custom-cursor {
      width: 200px;
      height: 100px;
      background-color: lightpink;
      cursor: url('https://www.codeswithpankaj.com/images/custom-cursor.png'), auto;
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="custom-cursor">
  Hover over me for a custom cursor.
</div>

</body>
</html>

Explanation:

  • The box uses a custom cursor defined by an image URL. If the image fails to load or isn’t supported, the default cursor is used.

5. Conclusion

CSS cursors are a simple yet effective way to enhance the user experience on your website. By customizing the cursor based on the context, you provide visual feedback that can guide users on how to interact with various elements.

  • Basic Cursors: Default arrow, pointer, crosshair, etc.

  • Link Cursors: Used for clickable elements like links and buttons.

  • Text Cursors: Used for editable text areas.

  • Resize Cursors: Indicate resizable elements.

  • Custom Cursors: Unique cursors using images.

Using the right cursor for the right context can make your web pages more intuitive and user-friendly.

For more tutorials and insights, visit Codes With Pankaj.

PreviousCSS OutlineNextCSS Overflow

Last updated