Custom Cursor css

Css cursor pointer

cursor: pointer;
/* Mouse image is a hand */

Css cursor pointer

body {
  	/*(Cursor image must be 32*32 pixles)*/
	cursor: url(CURSOR_URL), auto;
}

Cursor as image css

You can use own image or emoji as cursor
<style>       
    a{
        cursor: url("custom.gif"), url("custom.cur"), default;
    }
</style>

<p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p>

Custom cursor

<!DOCTYPE html>
<html>
 
<head>
    <style>
        :root {
            --color: 255, 71, 84;
            --cursor-size: 30px;
        }
 
        * {
            cursor: none;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            margin: 0;
            overflow: hidden;
 
            background: #121212;
        }
 
        .custom-cursor {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
 
            width: var(--cursor-size);
            height: var(--cursor-size);
 
            border: calc(var(--cursor-size)
                        /30) solid #fff;
            border-radius: 50%;
 
            animation: cursor 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor::before {
            content: "";
            display: block;
            width: calc(var(--cursor-size) / 2);
            height: calc(var(--cursor-size) / 2);
 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
 
            border: calc(var(--cursor-size) / 6)
                    solid rgba(var(--color), 0.5);
 
            border-radius: 50%;
 
            animation: cursor-before 800ms infinite
                    alternate ease-in-out;
        }
 
        .custom-cursor.click {
            animation: cursor-click 800ms
                normal ease-in-out;
        }
 
        @keyframes cursor {
            from {
                transform: scale(1);
                border-color: #fff;
            }
 
            to {
                transform: scale(1.5);
                border-color: rgb(var(--color));
            }
        }
 
        @keyframes cursor-before {
            from {
                transform: translate(-50%, -50%) scale(1);
                border-color: rgba(var(--color), 0.5);
            }
 
            to {
                transform: translate(-50%, -50%) scale(1.5);
                border-color: rgba(var(--color), 0.75);
            }
        }
 
        @keyframes cursor-click {
 
            0%,
            100% {
                transform: scale(1);
            }
 
            50% {
                transform: scale(2.5);
                border-color: rgb(var(--color));
            }
        }
    </style>
</head>
 
<body>
    <div class="custom-cursor"></div>
</body>
 
</html>

Source: geeksforgeeks.org

Custom Cursor css

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

Source: stackoverflow.com

Set custom cursor

//Syntax
.container:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' ><path  d='M ... Z'/></svg>"),
    auto;
}

//Real example
.container:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' ><path  d='M 3 5 L 3 23 C 3 25.210938 4.789063 27 7 27 L 25 27 C 27.210938 27 29 25.210938 29 23 L 29 12 L 23 12 L 23 5 Z M 5 7 L 21 7 L 21 23 C 21 23.730469 21.222656 24.410156 21.5625 25 L 7 25 C 5.808594 25 5 24.191406 5 23 Z M 7 9 L 7 14 L 19 14 L 19 9 Z M 9 11 L 17 11 L 17 12 L 9 12 Z M 23 14 L 27 14 L 27 23 C 27 24.191406 26.191406 25 25 25 C 23.808594 25 23 24.191406 23 23 Z M 7 15 L 7 17 L 12 17 L 12 15 Z M 14 15 L 14 17 L 19 17 L 19 15 Z M 7 18 L 7 20 L 12 20 L 12 18 Z M 14 18 L 14 20 L 19 20 L 19 18 Z M 7 21 L 7 23 L 12 23 L 12 21 Z M 14 21 L 14 23 L 19 23 L 19 21 Z'/></svg>"),
    auto;
}

Source: cssf1.com

Similar codes

1 vote149 views1 answer
How to change style based on screen size
CSS
100 votes128 views2 answers
What is position property in css
CSS
17 votes144 views1 answer
Yarn start not working on powershell
CSS
0 vote125 views1 answer
Html css hide details arrow
CSS
10 votes139 views2 answers
How to include one css file in another
CSS
0 vote134 views1 answer
Css position element in the middle of a header
CSS
1 vote147 views1 answer
Var minus scss
CSS
0 vote155 views1 answer
Scroll tbody fixed thead
CSS
0 vote157 views1 answer
Crypto module
CSS
0 vote147 views1 answer
How to hide text that is longer than its parent div
CSS