Css Cursor

What is Cursor?

The cursor Property is to define the type of cursor to be revealed when cursor hovers a link.

It gives an idea of the user interaction or about what the element is doing by bevelling it.

Default Cursor:

The arrow is the basic cursor shape, representing the default cursor.

                          
                            button {
                                cursor: default;
                            }

Pointer Cursor:

Points to a link or a clickable element.

                          
                            a {
                                cursor: pointer;
                            }

Crosshair Cursor:

Displays a crosshair, often used for selecting.

                          
                            div {
                                cursor: crosshair;
                            }

Text Cursor:

Indicates text selection.

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

Move Cursor:

Indicates that the item can be moved.

                          
                            .draggable {
                                cursor: move;
                            }

Resize Cursors:

Indicates that the item can be resized in different directions.

                          
                            .resizable {
                                cursor: nw-resize; /* northwest-resize */
                            }

You can use values like ne-resize, se-resize, sw-resize, n-resize, e-resize, s-resize, w-resize for different directions.

Help Cursor:

Displays a help icon, indicating help is available.

                          
                            .help-icon {
                                cursor: help;
                            }

Not Allowed Cursor:

Indicates that the requested action is not allowed.

                          
                            button[disabled] {
                                cursor: not-allowed;
                            }