This Circle cursor is trailed by a semi-transparent dot when moving. However, it turns into an after shadow when the cursor lands on a link.

HTML Code:

<div class="cursor"></div>
<div class="cursor2"></div>

CSS Code:

/* mouse hover */
.cursor {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 1px solid currentColor;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    z-index: 2000;
}

.cursor2 {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: currentColor;
    opacity: 0.3;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    z-index: 2001;
}

.hover {
    background-color: currentColor;
    opacity: 0.5;
}

.cursorinnerhover {
    width: 50px;
    height: 50px;
    opacity: 0.5;
}

JavaScript Code:

// Custom Cursor

var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
var a = document.querySelectorAll('a');

document.addEventListener('mousemove', function (e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function (e) {
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function () {
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover')
});

document.addEventListener('mouseup', function () {
  cursor.classList.remove('click')
  cursorinner.classList.remove('cursorinnerhover')
});

a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });
})

Preview: