CSS cursor: todos os valores, cursores personalizados e opacity
Galeria de cursores CSS
CSS cursor: todos os valores para testar, cursores personalizados, opacity | We.Inc
Passe o mouse sobre um bloco para cada um dos 36 valores padrão de cursor do CSS, crie um cursor personalizado com imagem, hotspot e fallback, e aprenda quando esmaecer com opacity, visibility ou rgba.
A propriedade cursor define o ponteiro do mouse exibido sobre um elemento, por exemplo cursor: pointer para itens clicáveis, not-allowed para controles desativados e grab para itens arrastáveis. Cursores personalizados usam url() com uma imagem, coordenadas opcionais de hotspot e uma palavra-chave de fallback obrigatória. Passe o mouse sobre cada bloco abaixo para ver os 36 valores padrão no seu navegador.
Os cursores que você mais vai usar
Estado
CSS
Tailwind
Link ou botão
cursor: pointer
Controle desativado
cursor: not-allowed
Pode ser arrastado / sendo arrastado
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Texto editável
cursor: text
Redimensionar uma coluna
cursor: col-resize
Ocupado, mas utilizável
cursor: progress
É fácil errar o nome de um cursor, e cada sistema operacional os desenha de um jeito um pouco diferente. Esta galeria permite passar o mouse sobre cada palavra-chave no seu próprio navegador, depois mostra como fazer um cursor personalizado com imagem que ainda tem um fallback elegante, além dos truques de opacity correspondentes para estados esmaecidos e desativados.
Passe o mouse sobre qualquer bloco da galeria para ver aquele cursor do jeito que o seu sistema o desenha. Clique em um bloco para copiar a declaração.
Use o filtro para limitar a lista a cursores de links, redimensionamento, arrastar ou status.
Abra o criador de cursor personalizado, ajuste o hotspot e teste o resultado na área de teste.
Leia a seção de opacity para escolher entre opacity, visibility e cores rgba para esmaecer.
Os navegadores já mostram pointer nos links. Adicione você mesmo em botões e outros elementos clicáveis, já que os botões usam a seta por padrão.
Mantenha as imagens de cursor personalizado com 32 por 32 pixels ou menos. Imagens maiores podem ser ignoradas por alguns navegadores e sistemas operacionais.
Sempre termine uma lista de cursores com uma palavra-chave como auto ou pointer. A palavra-chave é obrigatória depois de valores url().
Telas touch não têm cursor nenhum, então nunca use o cursor como o único sinal de que algo é interativo.
Perguntas frequentes
Como faço um cursor personalizado em CSS?
Escreva cursor: url(cursor.svg) 4 4, auto; em que a imagem é um arquivo PNG, SVG ou CUR pequeno, os dois números são o hotspot em pixels a partir do canto superior esquerdo, e auto é a palavra-chave de fallback usada se a imagem falhar. Você pode listar várias imagens url() antes da palavra-chave.
Qual cursor um botão desativado deve mostrar?
not-allowed é a escolha mais comum. Aplique com button:disabled { cursor: not-allowed; opacity: 0.5; } e mantenha o atributo disabled de verdade, para que usuários de teclado e de leitor de tela também saibam que o controle está indisponível, não só quem usa mouse.
Qual é a diferença entre opacity e visibility?
opacity esmaece o elemento inteiro, incluindo os filhos, e um elemento totalmente transparente ainda recebe cliques e foco. visibility: hidden desliga o elemento tanto para o ponteiro quanto para tecnologias assistivas, mas mantém o espaço dele. Use opacity para o esmaecimento em si e troque visibility no final para que itens invisíveis não possam ser clicados.
Por que a opacity deixa meu texto transparente também?
opacity se aplica a tudo dentro do elemento. Para deixar só o fundo translúcido, use uma cor translúcida: background-color: rgb(0 0 0 / 0.5), ou a forma mais antiga rgba(0, 0, 0, 0.5). O texto continua totalmente opaco.
Posso esconder o cursor?
cursor: none esconde o cursor sobre o elemento, algo de que jogos, quiosques e players de vídeo às vezes precisam. Use com moderação em sites comuns, porque as pessoas perdem a noção de para onde estão apontando.
Cursores são dicas, não controles
O cursor diz a quem usa mouse o que vai acontecer antes do clique. Um pointer promete um alvo clicável, um cursor de texto promete texto selecionável ou editável, e uma seta de redimensionamento promete arrastar. Mostrar um pointer em algo que não faz nada é uma promessa quebrada.
Usuários de teclado, touch e leitor de tela nunca veem essas dicas. Elementos interativos ainda precisam parecer interativos, ter um estilo de foco visível e usar botões e links de verdade para que a função deles seja anunciada.
Cursores com imagem que não quebram
A imagem de um cursor é baixada como qualquer outra imagem, então um download lento ou com falha deixa a palavra-chave de fallback no lugar. Um SVG inline em data: evita a requisição por completo e continua nítido em telas de alta densidade.
O hotspot é o pixel exato que clica. Em uma seta, é a ponta, geralmente perto de 0 0; em uma mira ou um círculo, é o centro. Um hotspot errado faz os cliques caírem alguns pixels longe de onde as pessoas miram.
Esmaecendo elementos do jeito certo
Para um visual desativado, combine opacity em torno de 0.5 com cursor: not-allowed e o atributo disabled. Confira se o texto esmaecido ainda atende aos requisitos de contraste caso as pessoas precisem lê-lo.
Para revelações no hover, anime a opacity porque ela é barata de renderizar, e combine com visibility para que o elemento não possa ser clicado enquanto está transparente. Uma cor com canal alfa é a ferramenta certa quando só uma camada, como um fundo ou uma borda, deve ser translúcida.
Todos os 36 valores de cursor
Palavras-chave padrão de cursor (CSS Basic User Interface Level 4); as classes do Tailwind são cursor-<value>
Valor
Grupo
Significado
Geral
O navegador decide pelo contexto
Geral
A seta da plataforma
Geral
Nenhum cursor desenhado
Links e status
Há um menu de contexto disponível
Links e status
Há ajuda disponível
Links e status
Um link ou controle clicável
Links e status
Ocupado, mas ainda dá para interagir
Links e status
Ocupado, ainda não dá para interagir
Seleção
Uma ou mais células de tabela podem ser selecionadas
Seleção
Seleção bidimensional precisa
Seleção
O texto pode ser selecionado ou editado
Seleção
O texto vertical pode ser selecionado
Arrastar e soltar
Um atalho ou alias será criado
Arrastar e soltar
Algo será copiado
Arrastar e soltar
Algo será movido
Arrastar e soltar
Não é possível soltar aqui
Arrastar e soltar
A ação não é permitida
Arrastar e soltar
Pode ser agarrado e arrastado
Arrastar e soltar
Está sendo arrastado agora
Redimensionar e rolar
Pode rolar em qualquer direção
Redimensionar e rolar
Redimensiona uma coluna na horizontal
Redimensionar e rolar
Redimensiona uma linha na vertical
Redimensionar e rolar
Move a borda superior
Redimensionar e rolar
Move a borda direita
Redimensionar e rolar
Move a borda inferior
Redimensionar e rolar
Move a borda esquerda
Redimensionar e rolar
Move o canto superior direito
Redimensionar e rolar
Move o canto superior esquerdo
Redimensionar e rolar
Move o canto inferior direito
Redimensionar e rolar
Move o canto inferior esquerdo
Redimensionar e rolar
Redimensiona para a esquerda ou direita
Redimensionar e rolar
Redimensiona para cima ou para baixo
Redimensionar e rolar
Redimensiona na diagonal ascendente
Redimensionar e rolar
Redimensiona na diagonal descendente
Zoom
Pode aumentar o zoom
Zoom
Pode diminuir o zoom
Cursor personalizado com hotspot e fallback
Cursor de anel em SVG inline centralizado no hotspot
O hotspot 12 12 coloca o clique no centro do anel. crosshair é usado se a imagem não for aceita.
Estados de desativado, arrastar e redimensionar
Cursores que combinam com a interação
Passe o mouse sobre cada elemento. O card arrastável muda para grabbing enquanto o botão do mouse está pressionado.
opacity vs visibility vs rgba
Como escolher a forma de esmaecer
Técnica
Afeta os filhos?
Ainda é clicável?
Anima suavemente?
Tailwind
opacity: 0.5
Sim, tudo o que está dentro
Sim
Sim
visibility: hidden
Sim (os filhos podem reativar)
Não
Troca na hora
background: rgb(0 0 0 / 0.5)
Não, só aquela camada
Sim
Sim
bg-black/50
color: rgb(17 17 17 / 0.6)
Não, só o texto
Sim
Sim
text-black/60
Opacity no elemento inteiro ao lado de um fundo translúcido
O banner da esquerda esmaece o texto junto com a caixa. O da direita mantém o texto nítido sobre um fundo translúcido.
O navegador decide pelo contexto
A seta da plataforma
Nenhum cursor desenhado
Há um menu de contexto disponível
Há ajuda disponível
Um link ou controle clicável
Ocupado, mas ainda dá para interagir
Ocupado, ainda não dá para interagir
Uma ou mais células de tabela podem ser selecionadas