Efeitos com Cursores (CSS)

Efeitos simples usando apenas CSS

← Voltar Ver efeitos com JavaScript →

Basic Cursor

Hover me!

HTML:

<div class="cursor-basic">
    <span>Hover me!</span>
</div>

CSS:

.cursor-basic {
    cursor: pointer;
}

Custom Cursor Image

Custom cursor with SVG

HTML:

<div class="cursor-custom">
    <span>Custom cursor with SVG</span>
</div>

CSS:

.cursor-custom {
    cursor: url('data:image/svg+xml;utf8,') 10 10, auto;
}

Emoji Cursor

Grab cursor

HTML:

<div class="cursor-emoji">
    <span>Grab cursor</span>
</div>

CSS:

.cursor-emoji {
    cursor: grab;
}

Zoom Cursor

Zoom cursor

HTML:

<div class="cursor-zoom">
    <span>Zoom cursor</span>
</div>

CSS:

.cursor-zoom {
    cursor: zoom-in;
}

Not Allowed Cursor

Not allowed cursor

HTML:

<div class="cursor-not-allowed">
    <span>Not allowed cursor</span>
</div>

CSS:

.cursor-not-allowed {
    cursor: not-allowed;
}

Text Selection Cursor

Text selection cursor

HTML:

<div class="cursor-text-select">
    <span>Text selection cursor</span>
</div>

CSS:

.cursor-text-select {
    cursor: text;
}

Move Cursor

Move cursor

HTML:

<div class="cursor-move">
    <span>Move cursor</span>
</div>

CSS:

.cursor-move {
    cursor: move;
}

Help Cursor

Help cursor

HTML:

<div class="cursor-help">
    <span>Help cursor</span>
</div>

CSS:

.cursor-help {
    cursor: help;
}