O que é a propriedade cursor?

A propriedade CSS cursor controla o aparelho visual do ponteiro do mouse ao passar sobre um elemento. É uma das formas mais simples de comunicar interatividade ao usuário sem precisar de JavaScript.

Cursores padrão do CSS

O CSS define mais de 30 valores de cursor padronizados. Os mais utilizados são: default, pointer, text, move, grab, grabbing, not-allowed, zoom-in e crosshair.

Use sempre cursor: pointer em botões e links clicáveis — isso melhora significativamente a experiência do usuário.

Cursor personalizado com URL

Para usar imagens personalizadas como cursor, utilize a sintaxe: cursor: url('meu-cursor.png') 0 0, auto;. O cursor deve ser uma imagem PNG com no máximo 128x128px. Você pode usar data URLs (base64) para evitar requisições HTTP extras.

O que é hotspot?

O hotspot define qual pixel da imagem representa o "ponto de clique" do cursor. Os dois números após a URL (url('...') X Y) indicam as coordenadas X e Y do hotspot. Para uma seta apontando para cima-esquerda, use 0 0. Para um alvo centralizado, use metade da largura e altura.

Boas práticas de UX com cursores

Use cursores que comuniquem intenção: grab para elementos arrastáveis, zoom-in para imagens clicáveis, not-allowed para ações desabilitadas. Evite cursores personalizados excessivamente criativos que confundem o usuário — clareza sempre vence estética.