Cursor circle

<style>

* { cursor: none !important; }

.cursor { position: fixed; top: 0; left: -100px; overflow: visible; z-index: 1000; pointer-events: none; }

.cursor:after { content:''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; background: #00A3DC; border-radius: 50%; transform: translate(-50%,-50%);

-webkit-transition: opacity 0.3s ease;

-moz-transition: opacity 0.3s ease;

-ms-transition: opacity 0.3s ease;

-o-transition: opacity 0.3s ease;

transition: opacity 0.3s ease;

}

.cursor:before { content:''; opacity: 0; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 3px solid #00A3DC; border-radius: 50%; transform: translate(-50%,-50%);

-webkit-transition: opacity 0.3s ease;

-moz-transition: opacity 0.3s ease;

-ms-transition: opacity 0.3s ease;

-o-transition: opacity 0.3s ease;

transition: opacity 0.3s ease;

}

/*.cursor.dark:after { background: #00A3DC; }*/

.cursor.menu-open:after { background: #eee; }

.cursor.menu-open:before { border-color: #eee; }

.cursor.hover:after { opacity: 0; }

.cursor.hover:before { opacity: 1; }

</style>

<script>

$("body").prepend('<div class="cursor"></div>');

$(document)

.mousemove(function(e) {

$('.cursor')

.eq(0)

.css({

"left": e.pageX,

"top": e.pageY - $(window).scrollTop()

});

});

$("a").mouseenter(function(){

$('.cursor').addClass('hover');

})

.mouseleave(function(){

$('.cursor').removeClass('hover');

});

</script>