Custom Circle Cursor Using CSS and JavaScript

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Custom Circle Style Cursor.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML Code For Circle Cursor

<section>
<h1>Custom Cursor</h1>
<a href="#">Hover Me</a>
</section>
<div class="cursor"></div>
<div class="cursor2"></div>

CSS Code For Circle Cursor

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
cursor: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
}
section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
h1 {
font-family: montserrat;
font-size: 40px;
}
a {
font-family: Montserrat;
position: relative;
text-decoration: none;
}
a:after {
content: '';
position: absolute;
width: 0;
height: 2px;
display: block;
margin-top: 0px;
left: 0%;
background: black;
transition: width .3s ease;
}
a:hover:after{
width: 100%;
left: 0%;
background: black;
}
.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;
}

Weather App Using Html,Css And JavaScript 

HTML + CSS Updated Output

JavaScript Code For Circle 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');
});
})

Final Output Of Circle Cursor Using HTML,CSS and JavaScript

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Thank you!

This post teaches us how to create a Custom Cursor using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki
Code By – Nick