Como cambiar el cursor de tu sitio web con propiedad CSS

Muchas veces cuando estamos trabajando con sitios web, sobre todo con aplicaciones web e interfaces, requerimos cambiar los cursores de los elementos, por ejemplo en ciertas ocasiones queremos cambiar la típica flechita por la manita que aparece cuando pasamos el mouse sobre un enlace.

Para este articulo asumo que ya tienes conocimientos básicos de HTML y CSS, y si no sabes estos lenguajes aquí tienes mi curso básico de HTML desde 0 y mi curso básico de CSS desde 0.

Establecer cursores diferente es muy importante para darle a entender al usuario que puede clickear un elemento, que puede cambiarlo de tamaño, moverlo, etc.

Es por eso que existe una propiedad CSS llamada cursor que nos permitirá establecer que tipo de cursor queremos usar en cada elemento.

cursor

Lo único que tenemos que hacer para cambiar el cursor de un elemento es aplicar la siguiente propiedad CSS con el valor del cursor que quieres para ese elemento, de esta manera:

div {
cursor:pointer;
}

En este ejemplo anterior lo que hacemos es cambiar a todos los cursores de los  la típica flecha como puntero.

Existen 37 tipos de cursores que podemos utilizar, aquí los ejemplos de cada uno de ellos así como el nombre de valor que reciben.

See the Pen Cursores CSS  by Carlos Arturo Esparza (@falconmasters) on CodePen.

Agregar una imagen como cursor

Como quizá ya pudiste haber observado en el cursor de URL podemos agregar nuestra propia imagen, esto por si quieres tener un cursor personalizado, en el ejemplo anterior yo agregue mi logotipo. Para hacer esto tenemos que utilizar la propiedad cursor con su valor url y la dirección de la imagen en formato .gif, quedándonos de la siguiente manera:

.url {cursor:url(http://falconmasters.com/img/cursor.gif), auto;}

Después de la url, he puesto el valor auto, de esta forma si no se encuentra o carga el cursor de la url podemos establecer que utilice un cursor automático. 

Si quieres saber mas acerca de cada tipo aquí tienes un enlace de la W3C.