This is from the custom cursor tutorial on the DesignCourse YouTube Channel

body { margin: 0; height: 100vh; //cursor: none; background: rgb(27, 27, 27); } .cursor { width: 20px; height: 20px; border: 1px solid white; border-radius: 50%; position: absolute; transition-duration: 200ms; transition-timing-function: ease-out; animation: cursorAnim .5s infinite alternate; pointer-events: none; } .cursor::after { content: ""; width: 20px; height: 20px; position: absolute; border: 8px solid gray; border-radius: 50%; opacity: .5; top: -8px; left: -8px; animation: cursorAnim2 .5s infinite alternate; } @keyframes cursorAnim { from { transform: scale(1); } to { transform: scale(.7); } } @keyframes cursorAnim2 { from { transform: scale(1); } to { transform: scale(.4); } } @keyframes cursorAnim3 { 0% { transform: scale(1); } 50% { transform: scale(3); } 100% { transform: scale(1); opacity: 0; } } .expand { animation: cursorAnim3 .5s forwards; border: 1px solid red; } p { color: white; font-family: 'arial'; text-align: center; margin-top: 50px; font-size: 1.4em; a { color: teal; } } const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") }) document.addEventListener('click', () => { cursor.classList.add("expand"); setTimeout(() => { cursor.classList.remove("expand"); }, 500) })