How to create custom cursor using HTML , CSS & JS
VIDEO.mp4
- html
<div class="movingcursor">
<button>Play reel</button>
</div>
- css
.page1 .movingcursor{
position: absolute;
width: 9vw;
height: 9vw;
background-color: #FF5838;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transform: translate(-50% , -50%);
/* z-index: 35; */
}
.page1 .movingcursor button{
color: black;
background-color: transparent;
outline: none;
border: none;
font-size: 1.2vw;
font-weight: 600;
font-family: nb;
}
- js
const cursor = document.querySelector('.page1 .movingcursor');
const page1 = document.querySelector('.page1');
page1.addEventListener('mousemove',(e) =>{
// cursor.style.left = e.x + "px";
// cursor.style.top = e.y + "px";
gsap.to(cursor,{
duration:'1',
x:e.x,
y:e.y,
ease:'power2'
})
})