You are currently viewing Custom Circle Cursor Using HTML,CSS and JavaScript

Custom Circle Cursor Using HTML,CSS and JavaScript

Custom Circle Cursor Using HTML,CSS and JavaScript

Custom Circle Cursor Using HTML,CSS and JavaScript
Custom Circle Cursor Using HTML,CSS and JavaScript

 

Welcome to Code With Random blog. This blog teaches us how we create a Custom Circle Style Cursor. We use Html, Css, and JavaScript for the Custom Circle Cursor.

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

HTML Code For Circle Cursor

<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 Circle Cursor. Now, you can see output without Adding Css and JavaScript. then we write Css Code For styling the circle cursor and Add JavaScript Code for the Custom Circle Cursor so that when we move the cursor there is a round type circle.

5+ HTML CSS Projects With Source Code

Only Html Code Output

Custom Circle Cursor Using HTML,CSS and JavaScript
Custom Circle Cursor Using HTML,CSS and JavaScript

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

50+ Html ,Css & Javascript Projects With Source Code

HTML + CSS Updated Output


Custom Circle Cursor Using HTML,CSS and JavaScript
Custom Circle Cursor Using HTML,CSS and JavaScript

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

 

Custom Circle Cursor Using HTML,CSS and JavaScript
Custom Circle Cursor Using HTML,CSS and JavaScript


Custom Circle Cursor Using HTML,CSS and JavaScript
Custom Circle Cursor Using HTML,CSS and JavaScript

 

 

 

Now that we have completed our Custom Circle Cursor. our updated output with Html, Css, and JavaScript. Hope you like the Custom Circle Cursor. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

10+ Javascript Projects For Beginners With 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

Leave a Reply