Cursor en css: personalizar el puntero del mouse

actualizado: 25 / 02 / 2023

La propiedad cursor en CSS controla cómo se verá el puntero del mouse cuando esté ubicado sobre el elemento en el que se establece esta propiedad.

Obviamente, solo es relevante en navegadores/sistemas operativos que tienen un mouse y puntero. Se utilizan esencialmente para la experiencia de usuario (UX) para transmitir la idea de cierta funcionalidad.

Tipos de cursor css

Cargando... Esperando para mostrar el código de este ejemplo

A continuación tienes una lista con los distintos valores disponibles para cambiar el cursor:

cursor: default

css/* Muestra el cursor predeterminado del navegador. */
.default {
  cursor: default;
}

cursor: pointer

css/* Cambia el cursor a una mano para indicar que el elemento es interactivo, como un enlace o un botón. */
.pointer {
  cursor: pointer;
}

cursor: progress

css/* Cambia el cursor a una rueda giratoria para indicar que se está cargando algo. */
.progress {
  cursor: progress;
}

cursor: move

css/*Cambia el cursor a una flecha con cuatro puntas para indicar que el elemento es movible.*/
.move {
  cursor: move;
}

cursor: context-menu

css/* Cambia el cursor a un menú contextual para indicar que se puede hacer clic con el botón derecho
 del ratón para acceder a un menú de opciones. */
.context-menu {
  cursor: context-menu;
}

cursor: help

css/* Cambia el cursor a un signo de interrogación para indicar que se puede obtener ayuda sobre el elemento. */
.help {
  cursor: help;
}

cursor: wait

css/* Cambia el cursor a un reloj de arena para indicar que se está cargando algo y se debe esperar. */
.wait {
  cursor: wait;
}

cursor: crosshair

css/* Cambia el cursor a una cruz para indicar que se puede seleccionar un área determinada. */
.crosshair {
  cursor: crosshair;
}

cursor: cell

css/* Cambia el cursor a una flecha en diagonal para indicar que se puede cambiar el tamaño de la celda de una tabla. */
.cell {
  cursor: cell;
}

cursor: text

css/* Cambia el cursor a un cursor de texto para indicar que se puede escribir texto en el elemento. */
.text {
  cursor: text;
}

cursor: vertical-text

css/* Cambia el cursor a un cursor de texto vertical para indicar que se puede escribir 
texto verticalmente en el elemento. */
.vertical-text {
  cursor: vertical-text;
}

cursor: alias

css/* Cambia el cursor a una flecha doble en diagonal para indicar que el elemento es un alias o un enlace a otra página. */

.alias {
  cursor: alias;
}

cursor: copy

css/* Cambia el cursor a una flecha con un símbolo de copiar para indicar que el elemento se puede copiar. */
.copy {
  cursor: copy;
}

cursor: no-drop

css/*
 Cambia el cursor a un círculo con una línea diagonal 
 para indicar que el elemento no se puede soltar en ese lugar.
 */
.no-drop {
  cursor: no-drop;
}

cursor: not-allowed

css/* Cambia el cursor a un círculo con una barra diagonal para indicar que no se permite la interacción con el elemento. */
.not-allowed {
  cursor: not-allowed;
}

cursor: zoom-in

css/* Cambia el cursor a una lupa para indicar que se puede hacer zoom para acercar el elemento. */
.zoom-in {
  cursor: zoom-in;
}

cursor: zoom-out

css/* Cambia el cursor a una lupa con un signo menos para indicar que se puede hacer zoom para alejar el elemento. */
.zoom-out {
  cursor: zoom-out;
}

cursor: grab

css/* Cambia el cursor a una mano con un agarre para indicar que se puede agarrar y arrastrar el elemento. */
.grab {
  cursor: grab;
}

cursor: grabbing

css/* Cambia el cursor a una mano cerrada para indicar que se está agarrando y arrastrando el elemento. */
.grabbing {
  cursor: grabbing;
}

Personalizar el cursor con una imagen con css

Puedes agregar una imagen a nuestro cursor en formato .png, .svg o .cur, Nota: svg no es un formato reconocido por navegadores antiguos considera usar un .cur y un valor por defecto como fallback. en caso de que la imagen svg no cargue.

css.custom {
  cursor: url("/images/image.svg"), url("/images/image.cur"), auto;
}

Personalmente recomiendo imágenes .png con dimensiones pequeñas, son mejor reconocidas por los navegadores y tiene una buena resolución.