Custom Cursor — Free HTML CSS JS Snippet

<div class="stage" id="stage">
  <div class="cursor-dot" id="dot"></div>
  <div class="cursor-ring" id="ring"></div>

  <div class="content">
    <h1>Custom Cursor</h1>
    <p>Move your mouse to see the custom cursor with lag effect.</p>
    <div class="interactive-items">
      <button class="item-btn" data-cursor="click">Click me</button>
      <a href="#" class="item-link" data-cursor="link">Hover link</a>
      <div class="item-text" data-cursor="text">Select text</div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; cursor: none; }

.stage {
  min-height: 100vh; background: #0f172a;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; overflow: hidden;
}

.cursor-dot {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px; border-radius: 50%;
  background: #6366f1;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, background 0.15s;
}

.cursor-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.5);
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, border-width 0.2s;
}

.cursor-dot.clicking { width: 12px; height: 12px; background: #ec4899; }
.cursor-ring.clicking { width: 44px; height: 44px; border-color: rgba(236,72,153,0.6); }
.cursor-dot.link { background: #0ea5e9; width: 10px; height: 10px; }
.cursor-ring.link { width: 48px; height: 48px; border-color: rgba(14,165,233,0.5); }
.cursor-dot.text { width: 2px; height: 20px; border-radius: 2px; }
.cursor-ring.text { width: 0; height: 0; border: none; }

.content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
h1 { font-size: 36px; font-weight: 800; color: #f1f5f9; }
p  { font-size: 14px; color: #475569; }

.interactive-items { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.item-btn { padding: 10px 22px; background: #6366f1; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: none; font-family: inherit; }
.item-link { padding: 10px 22px; color: #0ea5e9; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid #0ea5e933; border-radius: 8px; cursor: none; }
.item-text { padding: 10px 22px; color: #94a3b8; font-size: 14px; cursor: none; border: 1px solid #1e293b; border-radius: 8px; user-select: text; }

const dot  = document.getElementById('dot');
const ring = document.getElementById('ring');
let mx = 0, my = 0, rx = 0, ry = 0;

document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });

(function frame() {
  rx += (mx - rx) * 0.12;
  ry += (my - ry) * 0.12;
  dot.style.left  = mx + 'px';
  dot.style.top   = my + 'px';
  ring.style.left = rx + 'px';
  ring.style.top  = ry + 'px';
  requestAnimationFrame(frame);
})();

document.addEventListener('mousedown', () => { dot.classList.add('clicking'); ring.classList.add('clicking'); });
document.addEventListener('mouseup',   () => { dot.classList.remove('clicking'); ring.classList.remove('clicking'); });

document.querySelectorAll('[data-cursor]').forEach(el => {
  const type = el.dataset.cursor;
  el.addEventListener('mouseenter', () => { dot.classList.add(type); ring.classList.add(type); });
  el.addEventListener('mouseleave', () => { dot.classList.remove(type); ring.classList.remove(type); });
});