//HTML
<div class="custom-mouse"></div>
//CSS
.custom-mouse{
border: none;
background-color: #fff;
transform: translate(-50%, -100%);
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
top: 0;
}
//JS
let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
let xValue = details.clientX;
let yValue = details.clientY;
setTimeout(() => {
customMouse.style.top = `${yValue}px`;
customMouse.style.left = `${xValue}px`;
}, 100);
});
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter