<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="cursor"></div> <div class="cursor2"></div> </div> </div>

.cursor { width: 50px; height: 50px; border-radius: 100%; border: 1px solid black; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; transform: translate(calc(-50% + 15px), -50%); } .cursor2 { width: 20px; height: 20px; border-radius: 100%; background-color: black; opacity: .3; position: fixed; transform: translate(-50%, -50%); pointer-events: none; transition: width .3s, height .3s, opacity .3s; } .hover { background-color: red; opacity: 0.5; } .cursorinnerhover { width: 50px; height: 50px; opacity: .5; }

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'); }); })