1You can use own image or emoji as cursor
2<style>
3 a{
4 cursor: url("custom.gif"), url("custom.cur"), default;
5 }
6</style>
7
8<p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p>
9
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5.alias {cursor: alias;}
6.all-scroll {cursor: all-scroll;}
7.auto {cursor: auto;}
8.cell {cursor: cell;}
9.context-menu {cursor: context-menu;}
10.col-resize {cursor: col-resize;}
11.copy {cursor: copy;}
12.crosshair {cursor: crosshair;}
13.default {cursor: default;}
14.e-resize {cursor: e-resize;}
15.ew-resize {cursor: ew-resize;}
16.grab {cursor: -webkit-grab; cursor: grab;}
17.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
18.help {cursor: help;}
19.move {cursor: move;}
20.n-resize {cursor: n-resize;}
21.ne-resize {cursor: ne-resize;}
22.nesw-resize {cursor: nesw-resize;}
23.ns-resize {cursor: ns-resize;}
24.nw-resize {cursor: nw-resize;}
25.nwse-resize {cursor: nwse-resize;}
26.no-drop {cursor: no-drop;}
27.none {cursor: none;}
28.not-allowed {cursor: not-allowed;}
29.pointer {cursor: pointer;}
30.progress {cursor: progress;}
31.row-resize {cursor: row-resize;}
32.s-resize {cursor: s-resize;}
33.se-resize {cursor: se-resize;}
34.sw-resize {cursor: sw-resize;}
35.text {cursor: text;}
36.url {cursor: url(myBall.cur),auto;}
37.w-resize {cursor: w-resize;}
38.wait {cursor: wait;}
39.zoom-in {cursor: zoom-in;}
40.zoom-out {cursor: zoom-out;}
41</style>
42</head>
43<body>
44
45<h1>The cursor Property</h1>
46<p>Mouse over the words to change the mouse cursor.</p>
47
48<p class="alias">alias</p>
49<p class="all-scroll">all-scroll</p>
50<p class="auto">auto</p>
51<p class="cell">cell</p>
52<p class="context-menu">context-menu</p>
53<p class="col-resize">col-resize</p>
54<p class="copy">copy</p>
55<p class="crosshair">crosshair</p>
56<p class="default">default</p>
57<p class="e-resize">e-resize</p>
58<p class="ew-resize">ew-resize</p>
59<p class="grab">grab</p>
60<p class="grabbing">grabbing</p>
61<p class="help">help</p>
62<p class="move">move</p>
63<p class="n-resize">n-resize</p>
64<p class="ne-resize">ne-resize</p>
65<p class="nesw-resize">nesw-resize</p>
66<p class="ns-resize">ns-resize</p>
67<p class="nw-resize">nw-resize</p>
68<p class="nwse-resize">nwse-resize</p>
69<p class="no-drop">no-drop</p>
70<p class="none">none</p>
71<p class="not-allowed">not-allowed</p>
72<p class="pointer">pointer</p>
73<p class="progress">progress</p>
74<p class="row-resize">row-resize</p>
75<p class="s-resize">s-resize</p>
76<p class="se-resize">se-resize</p>
77<p class="sw-resize">sw-resize</p>
78<p class="text">text</p>
79<p class="url">url</p>
80<p class="w-resize">w-resize</p>
81<p class="wait">wait</p>
82<p class="zoom-in">zoom-in</p>
83<p class="zoom-out">zoom-out</p>
84
85</body>
86</html>
87
1/* All differents cursors */
2/* See https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor */
3/* to test them all */
4cursor: alias
5cursor: all-scroll;
6cursor: auto;
7cursor: cell;
8cursor: context-menu;
9cursor: col-resize;
10cursor: copy;
11cursor: crosshair;
12cursor: default;
13cursor: e-resize;
14cursor: ew-resize;
15cursor: grab;
16cursor: grabbing;
17cursor: help;
18cursor: move;
19cursor: n-resize;
20cursor: ne-resize;
21cursor: nesw-resize;
22cursor: ns-resize;
23cursor: nw-resize;
24cursor: nwse-resize;
25cursor: no-drop;
26cursor: none;
27cursor: not-allowed;
28cursor: pointer;
29cursor: progress;
30cursor: row-resize;
31cursor: s-resize;
32cursor: se-resize;
33cursor: sw-resize;
34cursor: text;
35cursor: url(myBall.cur),auto;
36cursor: w-resize;
37cursor: wait;
38cursor: zoom-in;
39cursor: zoom-out;
1/* Cursor Utility Classes */
2.cursor-alias {cursor: alias;}
3.cursor-all-scroll {cursor: all-scroll;}
4.cursor-auto {cursor: auto;}
5.cursor-cell {cursor: cell;}
6.cursor-context-menu {cursor: context-menu;}
7.cursor-col-resize {cursor: col-resize;}
8.cursor-copy {cursor: copy;}
9.cursor-crosshair {cursor: crosshair;}
10.cursor-default {cursor: default;}
11.cursor-e-resize {cursor: e-resize;}
12.cursor-ew-resize {cursor: ew-resize;}
13.cursor-grab {cursor: grab;}
14.cursor-grabbing {cursor: grabbing;}
15.cursor-help {cursor: help;}
16.cursor-move {cursor: move;}
17.cursor-n-resize {cursor: n-resize;}
18.cursor-ne-resize {cursor: ne-resize;}
19.cursor-nesw-resize {cursor: nesw-resize;}
20.cursor-ns-resize {cursor: ns-resize;}
21.cursor-nw-resize {cursor: nw-resize;}
22.cursor-nwse-resize {cursor: nwse-resize;}
23.cursor-no-drop {cursor: no-drop;}
24.cursor-none {cursor: none;}
25.cursor-not-allowed {cursor: not-allowed;}
26.cursor-pointer {cursor: pointer;}
27.cursor-progress {cursor: progress;}
28.cursor-row-resize {cursor: row-resize;}
29.cursor-s-resize {cursor: s-resize;}
30.cursor-se-resize {cursor: se-resize;}
31.cursor-sw-resize {cursor: sw-resize;}
32.cursor-text {cursor: text;}
33.cursor-url {cursor: url(myBall.cur),auto;}
34.cursor-w-resize {cursor: w-resize;}
35.cursor-wait {cursor: wait;}
36.cursor-zoom-in {cursor: zoom-in;}
37.cursor-zoom-out {cursor: zoom-out;}
38/* End: Cursor Utility Classes */
1#custom-cursor {
2 display: none;
3 position: fixed;
4 width: 20px;
5 height: 20px;
6 top: -10px;
7 left: -10px;
8 border: 2px solid black;
9 border-radius: 50%;
10 opacity: 1;
11 background-color: #fb4d98;
12 pointer-events: none;
13 z-index: 99999999;
14 transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
15}
16
17#custom-cursor.active {
18 opacity: 0.5;
19 background-color: #000;
20 border: 2px solid #fb4d98;
21}