ProgramingWeb

Personalizar el Cursor con css

Gracias esta propiedad tenemos la posibilidad de personalizar el cursor del mouse para que muestre ya sea una imagen especifica o un valor diferente al que traen los elementos por defecto.

Personalizar el cursor con una imagen svg o png usando css

Podemos 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.

.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.

Variantes para cambiar el estilo del cursor css

A continuación tienes una lista con los distintos valores disponibles para cambiar el cursor, si estas en una pc pasa el ratón por encima del nombre, para que observes como se ve el elemento con ese valor aplicado.

cursor: default

Es el valor que asigna el navegador por defecto es distinto dependiendo de la etiqueta.

.default {
  cursor: default;
}

cursor: pointer

Convierte el cursor en un manito, ideal para enlaces y botones.

.pointer {
  cursor: pointer;
}

cursor: progress

Agrega un circulo de progreso, ideal para mostrar que algo esta cargando.

.progress {
  cursor: progress;
}

cursor: move

Agrega flechas en todas las direcciones, ideal para indicar que el elemento se puede mover.

.move {
  cursor: move;
}

cursor: context-menu

Indica que hay una menú contextual.

.context-menu {
  cursor: context-menu;
}

cursor: help

.help {
  cursor: help;
}

cursor: wait

.wait {
  cursor: wait;
}

cursor: crosshair

.crosshair {
  cursor: crosshair;
}

cursor: cell

.cell {
  cursor: cell;
}

cursor: text

.text {
  cursor: text;
}

cursor: vertical-text

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

cursor: alias

.alias {
  cursor: alias;
}

cursor: copy

.copy {
  cursor: copy;
}

cursor: no-drop

.no-drop {
  cursor: no-drop;
}

cursor: not-allowed

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

cursor: zoom-in

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

cursor: zoom-out

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

cursor: grab

.grab {
  cursor: grab;
}

cursor: grabbing

.grabbing {
  cursor: grabbing;
}

Estas son las propieades que permiten cambiar los estilos y la forma del cursor con css, puedes ver todo el código en el siguiente enlace. Muchas gracias por leerme y espero haberte ayudado.