DEV Community

Cover image for Creating custom cursors for your website
RolandiXor (Roland L. Taylor)
RolandiXor (Roland L. Taylor)

Posted on

 

Creating custom cursors for your website

Hi!

In this quick tutorial, I'll show you how you can create custom cursors with just images and a few lines of CSS code.

Screenshot:
Example Image

The Cursors:

We need at least one custom cursor image. You can literally use any image in a format the browser supports. For example, I've used the SVG format.

The three cursor images

I've got three images:

  • default.svg
  • pointer.svg
  • text.svg

These will replace the following states:

  • Default.
  • Pointer.
  • Text.

The HTML code:

For this example, I have chosen three places to use my custom cursors:

  • The body:
  • A heading:

  • A button:

In the HTML code, you can add the following:

   <body>
      <h1>CSS Custom Cursor Demo<h1>
      <button>Custom Button</button>
   </body>
Enter fullscreen mode Exit fullscreen mode

NB: The text within the tags can be literally anything.

The CSS Code:

The CSS code is where everything really happens. We only need one property for each element, as follows:

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

h1 {
   cursor: url('text.svg'), text;
}

button {
   cursor: url('pointer.svg'), pointer;
}
Enter fullscreen mode Exit fullscreen mode

And that's it! Check out a recorded demo of this tutorial in action below:

Top comments (13)

Collapse
 
ahampriscilla profile image
Aham Priscilla

Just deployed my portfolio and I was looking for a way to get a custom cursor there for an added touch (I love great aesthetics). Thanks for this.

Collapse
 
rolandixor profile image
RolandiXor (Roland L. Taylor) • Edited

You're welcome! Glad to know it was helpful!

BTW, link up your portfolio (if you're okay with sharing). I'd love to see it!

Collapse
 
ahampriscilla profile image
Aham Priscilla

My portfolio is already up. For now its ahampriscilla.netlify.app/
If you do look at it... I'd appreciate the feedback. Thanks for asking.

Thread Thread
 
rolandixor profile image
RolandiXor (Roland L. Taylor)

Great job on a purposeful and easily navigated design! I was especially fascinated by the work you did on the cinema app.

One small tip, if I may: consider using a different style for hovered buttons on the About page. The colours are somewhat similar so it may be difficult for some readers. Otherwise, I think it's coming along nicely!

Thread Thread
 
ahampriscilla profile image
Aham Priscilla

Thank you so much for your feedback. I really appreciate you taking the time to go through it. I'll look into the about page as you said. Again, thank you!

Thread Thread
 
rolandixor profile image
RolandiXor (Roland L. Taylor)

You're welcome!

Collapse
 
preethi_dev profile image
Preethi⚡

Really short worthwhile and thanks for writing this blog :)

Collapse
 
rolandixor profile image
RolandiXor (Roland L. Taylor)

You're welcome! Thanks for your feedback!

Collapse
 
izn4y profile image
n4y

Really nice that cool thanks you 😁

Collapse
 
rolandixor profile image
RolandiXor (Roland L. Taylor)

You're welcome! Thanks for the comment!

Collapse
 
johnrock profile image
John Rock

Custom cursors are not my cup of tea but nice tutorial!

Collapse
 
rolandixor profile image
RolandiXor (Roland L. Taylor)

They're not mine either, honestly, but glad to make the knowledge available for anyone who may need it. They can be useful for accessibility.

Collapse
 
mayankkashyap681 profile image
Mayank Kashyap

can we add animations as well?