Rounded Cursor
CSS
/* Hide the default cursor */
body {
cursor: none;
}
/* Custom cursor styling */
.cursor {
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: background-color 0.2s ease;
z-index: 1000;
}
/* Styling for the fill effect on click, without size changes */
.cursor.click-effect {
background-color: #333;
}
/* Cursor expands when hovering over links */
a:hover ~ .cursor,
a:hover + .cursor {
width: 30px;
height: 30px;
border-color: #555;
}
HTML
<script>
document.addEventListener("DOMContentLoaded", function() {
// Create and add the custom cursor element to the page
const cursor = document.createElement('div');
cursor.classList.add('cursor');
document.body.appendChild(cursor);
console.log("Custom cursor created"); // Debug: Check if the cursor is added to the page
// Update cursor position on mouse move
document.addEventListener('mousemove', (e) => {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
});
// Add and remove fill effect on mouse down and up
document.addEventListener('mousedown', () => {
cursor.classList.add('click-effect');
});
document.addEventListener('mouseup', () => {
cursor.classList.remove('click-effect');
});
});
</script>
