CSS ya viene con una buena cantidad de cursores disponibles que puedes usar en la propiedad de cursor. Puedes ver la lista en detalle en la documentación de MDN.
Adicionalmente a esta lista, la propiedad cursor admite
cursores personalizados a partir de imágenes. La sintaxis para hacer esto
es:
cursor: url("image_name.jpg"), auto;
Supongamos que quieres que el cursor sea un corazón cuando se hace click en el botón “me gusta” de tu página web. Para mostrarte esto, busqué en Iconos8 un ícono de corazón que pudiera utilizar como ejemplo.
Una vez que hayas seleccionado la imagen que reemplazará al cursor por defecto, imagina que este es el botón de “me gusta” al que le vas a cambiar el cursor.
Y ahora, en CSS cambia el cursor siguiendo la sintaxis que te mostré al principio.
.btn-cursor {
width: 150px;
cursor: url("https://img.icons8.com/fluency/48/000000/heart-plus.png"), auto;
}
¿Sabes que tu CSS puede quedar aún mejor con las variables que te mostré al inicio?
:root {
--cursor: url("https://img.icons8.com/fluency/48/000000/heart-plus.png");
}
.btn-cursor {
width: 150px;
cursor: var(--cursor), auto;
}
Así puedes reutilizar el cursor de corazón en otros lugares de tu sitio.