CSS CURSOR

CSS cursor property in CSS specifies the type of cursor to be displayed when the mouse is over that element.

Default property:	auto
Version:	CSS 2,3
Animation:	no
Applies to:	all element
Inherited:	Yes

Showcase of different cursor type

Take your mouse pointer over these buttons and see how the pointer changes.

auto default none initial inherit context-menu help pointer Progress wait cell crosshair text vertical-text alias copy move no-drop not-allowed all-scroll col-resize row-resize n-resize e-resize s-resize w-resize ne-resize nw-resize se-resize se-resize ew-resize ns-resize nesw-resize nwse-resize zoom-in zoom-out grab grabbing

Here is an example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .cursor{
                display: flex;
                flex-wrap: wrap;
                }
            .cursor-button{
                display: inline-block;
                background-color: #006699;
                color: white;
                text-align: center;
                border: 1px solid gray;
                margin: 0px 5px 5px 0px;
                padding: 5px;
                min-width: 85px;
                border-radius: 5px;
                }
        </style>
    </head>
<body>
    <h2>Take your mouse pointer over the buttons and see how mouse pointer change.</h2>
    <span class="cursor-button" style=cursor:auto;>auto</span>
    <span class="cursor-button" style=cursor:default;>default</span>
    <span class="cursor-button" style=cursor:none;>none</span>
    <span class="cursor-button" style=cursor:initial;>initial</span>
    <span class="cursor-button" style=cursor:inherit;>inherit</span>
    <span class="cursor-button" style=cursor:context-menu;>context-menu</span>
    <span class="cursor-button" style=cursor:help;>help</span>
    <span class="cursor-button" style=cursor:pointer;>pointer</span>
    <span class="cursor-button" style=cursor:progress;>progress</span>
    <span class="cursor-button" style=cursor:wait;>wait</span>
    <span class="cursor-button" style=cursor:cell;>cell</span>
    <span class="cursor-button" style=cursor:crosshair;>crosshair</span>
    <span class="cursor-button" style=cursor:text;>text</span>
    <span class="cursor-button" style=cursor:vertical-text;>vertical-text</span>
    <span class="cursor-button" style=cursor:alias;>alias</span>
    <span class="cursor-button" style=cursor:copy;>copy</span>
    <span class="cursor-button" style=cursor:move;>move</span>
    <span class="cursor-button" style=cursor:no-drop;>no-drop</span>
    <span class="cursor-button" style=cursor:not-allowed;>not-allowed</span>
    <span class="cursor-button" style=cursor:all-scroll;>all-scroll</span>
    <span class="cursor-button" style=cursor:col-resize;>col-resize</span>
    <span class="cursor-button" style=cursor:row-resize;>row-resize</span>
    <span class="cursor-button" style=cursor:n-resize;>n-resize</span>
    <span class="cursor-button" style=cursor:e-resize;>e-resize</span>
    <span class="cursor-button" style=cursor:s-resize;>s-resize</span>
    <span class="cursor-button" style=cursor:w-resize;>w-resize</span>
    <span class="cursor-button" style=cursor:ne-resize;>ne-resize</span>
    <span class="cursor-button" style=cursor:nw-resize;>nw-resize</span>
    <span class="cursor-button" style=cursor:se-resize;>se-resize</span>
    <span class="cursor-button" style=cursor:se-resize;>sw-resize</span>
    <span class="cursor-button" style=cursor:ew-resize;>ew-resize</span>
    <span class="cursor-button" style=cursor:ns-resize;>ns-resize</span>
    <span class="cursor-button" style=cursor:nesw-resize;>nesw-resize</span>
    <span class="cursor-button" style=cursor:nwse-resize;>nwse-resize</span>
    <span class="cursor-button" style=cursor:zoom-in;>zoom-in</span>
    <span class="cursor-button" style=cursor:zoom-out;>zoom-out</span>
    <span class="cursor-button" style=cursor:grab;>grab</span>
    <span class="cursor-button" style=cursor:grabbing;>grabbing</span>
</body>
</html>

▶ Run the code

❮ Prev Next ❯