Custom Cursor | Circle Cursor Using Html Css Javascript







Custom Cursor | Circle Cursor Using Html Css Javascript

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Custom Cursor. We use HTML, Css, and javascript for the Custom Cursor. I hope you enjoy our blog so let’s start with a basic HTML structure for the Custom Cursor. 

HTML Code

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

There is all the HTML code for the Custom Cursor. Now, you can see an output with a Custom Cursor then we write javascript for the Custom Cursor.

output

Custom Cursor | Circle Cursor Using Html Css Javascript

CSS code

 @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;
}

Css Updated output


Custom Cursor | Circle Cursor Using Html Css Javascript

Javascript Code

 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

Custom Cursor | Circle Cursor Using Html Css Javascript


Custom Cursor | Circle Cursor Using Html Css Javascript


Now that we have completed our javascript section, our updated output with javascriptHope you like the Custom Cursor. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create a Custom Cursor using simple 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
Check out more…..

Share on:

Leave a Comment