How to create custom cursor using CSS?
Custom cursor enhances the readability of the document and grabs the user attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS and Javascript.
Approach:
- Hide the default cursor.
- Define the classes which contains all the animations.
- Add and remove these classes dynamically when the mouse button is pressed or when the mouse pointer is moved.
Example:
<!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> |
chevron_right
filter_none
JavaScript code:
const cursor = document .querySelector(".custom-cursor"); // Adding the animations when the // mouse button is clciked window.addEventListener("mousedown", (event) => { if (!cursor.classList.contains("click")) { cursor.classList.add("click"); setTimeout(() => { cursor.classList.remove("click"); }, 800); } }); // Getting the position of the cursor window.addEventListener("mousemove", (event) => { let x = event.pageX - cursor.offsetWidth / 2, y = event.pageY - cursor.offsetHeight / 2; cursor.style.left = `${x}px`; cursor.style.top = `${y}px`; }); |
chevron_right
filter_none
Complete Code:
<!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> <script> const cursor = document .querySelector(".custom-cursor"); // Adding the animations when the // mouse button is clciked window.addEventListener("mousedown", (event) => { if (!cursor.classList.contains("click")) { cursor.classList.add("click"); setTimeout(() => { cursor.classList.remove("click"); }, 800); } }); // Getting the position of the cursor window.addEventListener("mousemove", (event) => { let x = event.pageX - cursor.offsetWidth / 2, y = event.pageY - cursor.offsetHeight / 2; cursor.style.left = `${x}px`; cursor.style.top = `${y}px`; }); </script> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
