DEV Community

Cover image for Creating custom cursors for your website
Roland Taylor
Roland 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)

 
rolandixor profile image
Roland 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
 
best_codes profile image
Best Codes

Are you complimenting yourself?

Thread Thread
 
rolandixor profile image
Roland Taylor

This comment accidentally got posted on the wrong article lol

Thread Thread
 
best_codes profile image
Best Codes

Oh... I see...

Collapse
 
johnrock profile image
John Rock

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

Collapse
 
rolandixor profile image
Roland 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
 
preethi_dev profile image
Preethi⚡

Really short worthwhile and thanks for writing this blog :)

Collapse
 
rolandixor profile image
Roland Taylor

You're welcome! Thanks for your feedback!

Collapse
 
izn4y profile image
n4y

Really nice that cool thanks you 😁

Collapse
 
rolandixor profile image
Roland Taylor

You're welcome! Thanks for the comment!

 
rolandixor profile image
Roland Taylor

You're welcome!

Collapse
 
rolandixor profile image
Roland 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
 
mayankkashyap681 profile image
Mayank Kashyap

can we add animations as well?