Imagen destacada del artículo Editar y personalizar el cursor con css

Editar y personalizar el cursor con css

css svg
actualizado: 19 / 07 / 2022

Gracias a la propiedad cursor de css tenemos la posibilidad de personalizar el cursor del mouse para que muestre ya sea una imagen especifica o un icono diferente al que tienen 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.

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.

Poner diferentes tipos de cursores con css

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

cursor: default

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

css
.default {
cursor: default;
}

cursor: pointer

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

css
.pointer {
cursor: pointer;
}

cursor: progress

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

css
.progress {
cursor: progress;
}

cursor: move

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

css
.move {
cursor: move;
}

cursor: context-menu

Indica que hay una menú contextual.

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

cursor: help

css
.help {
cursor: help;
}

cursor: wait

css
.wait {
cursor: wait;
}

cursor: crosshair

css
.crosshair {
cursor: crosshair;
}

cursor: cell

css
.cell {
cursor: cell;
}

cursor: text

css
.text {
cursor: text;
}

cursor: vertical-text

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

cursor: alias

css
.alias {
cursor: alias;
}

cursor: copy

css
.copy {
cursor: copy;
}

cursor: no-drop

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

cursor: not-allowed

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

cursor: zoom-in

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

cursor: zoom-out

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

cursor: grab

css
.grab {
cursor: grab;
}

cursor: grabbing

css
.grabbing {
cursor: grabbing;
}

Ejemplo de todos los estilos del cursor

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

CSS text-align propiedad para alinear el texto de una etiqueta html

Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html

Centrar formulario html y css

Imagen destacada del artículo Centrar formulario html y css