How to Change the Cursor Shape in CSS?
Last Updated :
24 Apr, 2024
In this article, we will change the Cursor Shape in CSS. The cursor property is used to change the cursor shape. This property allows you to specify the type of cursor that should be displayed when the mouse pointer is over an element.
Using the cursor Property
The cursor property is used to change the cursor shape. There are various predefined cursor types that you can use:
- auto: The browser determines the cursor to display (usually an arrow).
- default: The default cursor (usually an arrow).
- pointer: A hand cursor used for clickable elements.
- progress: A progress indicator is used for loading content.
- wait: A wait cursor is used to indicate that the browser is busy.
- text: A text cursor is used when hovering over text.
- help: A help cursor is used to indicate help is available.
Syntax:
.cursor-pointer {
cursor: pointer; /* Change cursor to a hand pointer */
}Example: In this example, we will change the cursor-pointer to different shape on three different paragraphs.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Change the Cursor
Shape using CSS?
</title>
<style>
body {
text-align: center;
}
.cursor-progress {
cursor: progress;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-help {
cursor: help;
}
</style>
</head>
<body>
<p class="cursor-progress">
Cursor Progress
</p>
<p class="cursor-pointer">
Cursor Pointer
</p>
<p class="cursor-help">
Cursor Help
</p>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...