CSS Cursors

The CSS cursor property is used to specify the type of cursors.

One smart usage of this property is in exploitation pictures for submit buttons on forms. By default, once a pointer hovers over a link, the pointer changes from a pointer to a hand. However, it doesn't type|change shape|deform|change} for a submit button on a form. Therefore, whenever somebody hovers over a picture that's a submit button, it provides a visible clue that the image is clickable.


<!DOCTYPE html>
    <title> CSS cursor property</title>
        .all span{
            min-width: 100px;
            padding: 7px 18px;
            margin-bottom: 5px;
            display: inline-block;
            border: 1px solid grey;
        <h1>General Cursor</h1>
        <p>Place your mouse pointer <a href="#">here</a> to reveal the custom cursor.</p>
        <h2>More Cursors</h2>
        <p>Place your mouse pointer over the box to reveal the cursor.</p>
        <div class="all">
            <span style="cursor: auto;">auto</span>
            <span style="cursor: default;">default</span>
            <span style="cursor: none;">none</span>
            <span style="cursor: context-menu;">context-menu</span>
            <span style="cursor: help;">help</span>
            <span style="cursor: pointer;">pointer</span>
            <span style="cursor: progress;">progress</span>
            <span style="cursor: wait;">wait</span>
            <span style="cursor: n-resize;">n-resize</span>
            <span style="cursor: ne-resize;">ne-resize</span>
            <span style="cursor: nw-resize;">nw-resize</span>
            <span style="cursor: s-resize;">s-resize</span>
            <span style="cursor: se-resize;">se-resize</span>
            <span style="cursor: sw-resize;">sw-resize</span>
            <span style="cursor: w-resize;">w-resize</span>
            <span style="cursor: ew-resize;">ew-resize</span>
            <span style="cursor: ns-resize;">ns-resize</span>
            <span style="cursor: nesw-resize;">nesw-resize</span>
            <span style="cursor: nwse-resize;">nwse-resize</span>
            <span style="cursor: col-resize;">col-resize</span>
            <span style="cursor: row-resize;">row-resize</span>
            <span style="cursor: all-scroll;">all-scroll</span>
            <span style="cursor: zoom-in;">zoom-in</span>
            <span style="cursor: zoom-out;">zoom-out</span>
            <span style="cursor: cell;">cell</span>
            <span style="cursor: crosshair;">crosshair</span>
            <span style="cursor: text;">text</span> 
            <span style="cursor: vertical-text;">vertical-text</span>
            <span style="cursor: alias;">alias</span>
            <span style="cursor: copy;">copy</span>
            <span style="cursor: move;">move</span>
            <span style="cursor: no-drop;">no-drop</span>
            <span style="cursor: not-allowed;">not-allowed</span>
            <span style="cursor: grab;">grab</span>
            <span style="cursor: grabbing;">grabbing</span>
            <span style="cursor:e-resize">e-resize</span>

Click on the "Run This Code" button to see how it works.


Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements


CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units