Custom Cursor, can't click on DOM elements

Question

I was trying to make a circle that is following mouse, aka custom cursor. In fact it's working as expected. But i have one issue. If there is a for example button, under the circle, and i want to click the button through the circle it doesn't work. *I can click on element and it works fine, only when the circle is not under mouse yet.

Played with z-index and other thing, but there was no proper result, because i want to have that circle visible over hovered element, like it is in the example down below.

window.CustomCursor = new(function() {
	const self = this;
	const css = `
		.customCursor {
			z-index: 999;
			width: 22px;
			height: 22px;
			border: 1.2px solid #2980b9;
			border-radius: 50%;
			position: absolute;
			transition-duration: 200ms;
			transition-timing-function: ease-out;
		}
	`;
	//Creating Style
	const style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    document.querySelector('head').appendChild(style);

	//Creating Cursor
	const cursor = document.createElement('div');
	cursor.className = "customCursor";
	document.querySelector('body').appendChild(cursor);


	//Creating Logic
	document.addEventListener("mousemove", e => {
		const {pageX, pageY} = e;
		cursor.setAttribute(`style`, `top: ${pageY - 11}px; left: ${pageX - 11}px;`);
	});

	document.addEventListener("click", e => {
		//soon
	});
});

body {
  background: #0f1215;
}

<button onclick="alert('Hi')">Button</button>

Answer 1

Add pointer-events: none; to the cursor styles.

const css = `
    .customCursor {
        z-index: 999;
        width: 22px;
        height: 22px;
        border: 1.2px solid #2980b9;
        border-radius: 50%;
        position: absolute;
        transition-duration: 200ms;
        transition-timing-function: ease-out;
        pointer-events: none; /* ADD_ME */
    }
`;