WebDev Tips . Creating a custom cursor with CSS

Creating a custom cursor with CSS

#168

CSS

April 15, 2020

alt text

What's up guys, all good? 🤘
Have you ever used custom cursors on your websites?

Well, today we'll see how we can do that with some really simple CSS! Having a custom cursor can be a cool feature on a website wether it is to match the overall design of the website or to create a more immersive experience.


<div class="container">
           
   <h1>Some content here</h1>

   <p>
       Lorem ipsum dolor sit amet....
   </p>

</div>

On the HTML, I'm just adding some random content, nothing too special. Now on our CSS, we just need to add a rule to the body element. We'll add 'cursor: (cursor.png), default;' and that's basically everything we need to create a custom cursor.


body {
   cursor: url('cursor.png'), default;	
}

.container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   min-height: 100vh;
   width: 85%;
   margin: 0 auto;
}

h1 {
   margin-bottom: 20px;
   color: #424242;
}

p {
   color: #616161;
   font-weight: 300;
   line-height: 30px;  
}

This 'cursor.png' is a image that I created - just a simple green circle. You can swap this for any image you want, wether it is a local image or some image you find on the internet. As @4nmolchaudhary stated here, these images have to be 34px x 34px max.

And that's it. Do you like websites that use custom cursors instead of the default one?
Have a great day guys! 🙏