Instructions

1. Edit the normal and hover states as much as you like using the sliders and color pickers in the "Normal" and "Hover" tabs.
2. Click the "Refresh CSS" button to generate the CSS code, then click the "Copy CSS" button to copy the generated CSS code.
3. Add the copied CSS code to your website's stylesheet file (.css).
4. Copy the following HTML and JavaScript code and paste it within the header tag of your website:

<div class="custom-cursor" id="custom-cursor">
    <div class="inner-circle" id="inner-circle"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const customCursor = document.getElementById('custom-cursor');
    const innerCircle = document.getElementById('inner-circle');

    document.addEventListener('mousemove', (e) => {
        const cursorSize = customCursor.clientWidth / 2;
        customCursor.style.left = `${e.clientX - cursorSize}px`;
        customCursor.style.top = `${e.clientY - cursorSize}px`;
    });

    const hoverTargets = document.querySelectorAll('a, button, [role="button"], input[type="button"], input[type="submit"], .hover-target');
    hoverTargets.forEach(target => {
        target.addEventListener('mouseenter', () => {
            customCursor.classList.add('hover');
        });
        target.addEventListener('mouseleave', () => {
            customCursor.classList.remove('hover');
        });
    });
});
</script>