Cursor Experiment

cursor.css

body {
    background-color: hsla(250, 20%, 10%, 1);
    color: hsla(250, 50%, 70%, 1);
}

*{
    cursor: none;
}

a,
a:link,
a:visited{
    transition: all .2s cubic-bezier(1, .3, .3, 1);
    color: hsla(250, 50%, 90%, 1);
    text-decoration: none;
}
a:hover,
a:focus,
a:active{
    color: hsla(250, 80%, 100%, 1);
}

#cursor {
    transition: transform .2s cubic-bezier(1, .3, .3, 1),
               background .2s cubic-bezier(1, .3, .3, 1);
    opacity: 0;
    z-index: 99;
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) translateY(-50%);
    background-color: hsla(160, 100%, 60%, 1);
    border-radius: 50%;
    pointer-events: none;
}
#cursor.cursor-down {
    transform: translateX(-50%) translateY(-50%) scale(0.6) !important;
}
#cursor::before {
    transform: scale(0.001, 0.001);
    opacity: 0;
    display: block;
    z-index: 98;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: hsla(0, 100%, 100%, 0.3);
    content: "";
}
#cursor.cursor-release::before {
    animation: release 0.4s ease-out;
}
@keyframes release {
    1% {
        transform: scale(0.001, 0.001);
        opacity: 1;
    }
    99% {
        transform: scale(8, 8);
        opacity: 0;
    }
    100% {
        transform: scale(0.001, 0.001);
        opacity: 0;
    }
}
#cursor.default-hover {
    transform: translateX(-50%) translateY(-50%) scale(2);
    background-color: hsla(160, 100%, 50%, 1);
}
#cursor.test {
    transform: translateX(-50%) translateY(-50%) scale(3);
    background-color: hsla(100, 100%, 50%, 1);
}
#cursor.other {
    box-shadow: 0px 0px 20px 5px hsla(250, 20%, 10%, 1);
}

cursor.js

var $cursor = $( "#cursor" );
var cursorClasses = "";

$( document ).mousemove(
    function( e ) { //client instead of page
   			$cursor.css( "top", e.clientY )
        			 .css( "left", e.clientX );
    }
);

$( document ).hover(
    function() {
      	$cursor.css( "opacity", "1" );
    }, function() {
      	$cursor.css( "opacity", "0" );
    }
).mousedown(
		function() {
    		$cursor.clearQueue()
        			 .removeClass( "cursor-release" );
    		$cursor.addClass( "cursor-down" );
  	}
).mouseup(
		function() {
    		$cursor.removeClass( "cursor-down" )
               .addClass( "cursor-release" )
        			 .delay( 400 )
               .queue(
               	 	 function() {
    							 	 	 $( this ).removeClass( "cursor-release" )
                       					.dequeue();
									 }
               ); 			 
  	}
);

$( "a" ).hover(
    function() {
        window.cursorClasses = $( this ).attr( "class" );
        $cursor.addClass( "default-hover" )
        			 .addClass( window.cursorClasses );
    }, function() {
        $cursor.removeClass( "default-hover" )
        			 .removeClass( window.cursorClasses );
        window.cursorClasses = "";
    }
);

index.html

<p>Lorem ipsum <a href="#" class="test other">Link 1</a> and <a href="#">Link 2</a>.</p>

<div id="cursor">&nbsp;</div>