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#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}