Customizing the Cursor

Show off your personality by adding a custom cursor.

 

1. Get your cursor ready

Use anything as a cursor. It can be an icon, symbol, or a graphic that your drew.

To keep things simple, export it as .png or .jpg format. Also, resize your cursors so it’s around 30px x 30px or less — not too big or small.

 

Normal state 🐭

Hover state 😊

 

2. Get your image urls

Upload your cursor images into CSS editor and grab your image URLs.

https://static1.squarespace.com/static/64cda263061376fa9c7/noun-computer-mouse-6390956+copy.png
 

3. Copy and paste this CSS

Remember to:

  • Add your image URLs

  • Add more selectors if needed

/* CURSOR ************/
* {
  cursor: url(''), auto !important;
}

a:hover, .sqs-block-image-link:hover *, a:hover *, .form-item input:hover, .form-item textarea:hover, button:hover {
  cursor: url(''), auto !important;
}
Code SnippetsSuki ChanSection 3 - Custom Sites