- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set different type of cursors using CSS?
CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of a website, including the cursor style. Cursors are an important aspect of web design. It helps to provide visual feedback to the users and enables them to interact effectively.
What is a Cursor?
Cursor is a position indicator that indicates the user's current location on the screen. It is also known as a "caret." It plays an important role in user interface design. In CSS, we can set the cursor as needed to provide visual feedback to the user, which indicates the action that can be performed at a specific location.
Syntax
css selector {
courser : courser type;
}
Now, we will explore different types of cursors that can be set using CSS
The Default Cursor
In web design, the default cursor is the most common cursor type and is used when no other cursor is specified. It looks like an arrow pointer on the screen, indicating that the user can click on the element.
Example 1
Here is an example to set the default cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
a {
cursor: default;
}
</style>
</head>
<body>
<h2>This is an example of default cursor</h2>
<a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>
The Pointer Cursor
The pointer cursor is represented by a hand that points to a link. When a user hovers over a link, it indicates that the element is clickable. we can use the below code to set the pointer cursor −
css-elector {
cursor: pointer;
}
The Text Cursor
The text cursor is a blinking horizontal or vertical line that appears as an I-beam pointer. When a user hovers over text or a text input field, it indicates that they have edited or selected the text. We can use the below code to set the text cursor −
css-elector {
cursor: text;
}
The Crosshair Cursor
The Crosshair Cursor is simply displaying a horizontal and a vertical line that appears as a crosshair pointer. The crosshair cursor is used to select a specific area on the screen, as in an image editing tool. We can use the below code to set the crosshair cursor −
css-elector {
cursor: crosshair;
}
The Move Cursor
The move cursor appears on the screen as a four-headed arrow pointer. It is typically used to drag and drop an element, indicating that it can be moved. We can use the below code to set the move cursor −
css-elector {
cursor: move;
}
The Not-Allowed Cursor
The Not-Allowed cursor indicates that the requested operation will not be performed. It appears as a circle with a diagonal line. We can use the below code to set the not-allowed cursor −
css-elector {
cursor: not-allowed;
}
The Progress Cursor
The progress cursor appears as a spinning circle. It means the program is busy in the background, but the user can still interact with the interface. We can use the below code to set the progress cursor −
css-elector {
cursor: progress;
}
The Wait Cursor
The wait cursor appears as a spinning pinwheel. It means the program is busy, and cannot interact with the user interface. We can use the below code to set the wait cursor −
css-elector {
cursor: wait;
}
The Help Cursor
The help cursor appears as a question mark pointer. It is used when the user needs assistance, such as clicking on a help icon or button. We can use the below code to set the Help cursor −
css-elector {
cursor: help;
}
Example 2
Here is an example of how to set the different types of cursors using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color: lightgreen;
}
div{
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Setting the different types of cursors using CSS</h2>
<h3>Move the mouse over the words to see the cursor change:</h3>
<div style="cursor:default">Default</div>
<div style="cursor:text">Text</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:move">Move</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:progress">Progressd</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
</body>
</html>
Using Custom Cursors with CSS
In addition to the standard cursors provided by CSS, we can also use custom cursors. By using the custom cursor, we can add a unique touch to the website.
Example 3
Here is an Example to create custom cursors with CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.my-cursor {
width: 200px;
margin: auto;
background-color: lightblue;
cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
}
</style>
</head>
<body>
<h2>Custom Cursors with CSS</h2>
<div class="my-cursor">
<h3>Move the mouse over to see the cursor change</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
</body>
</html>
In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto. This means the browser uses the cursor_120340.png file as the custom cursor, and falls back to the default cursor if the file cannot be found or loaded.
Conclusion
Here we have discussed different types of CSS cursors. It is a powerful tool for web designers that allow for the customization of cursor styles and provide visual feedback for user interactions. By using the code above, we can set different types of cursors in CSS.
52 Views
