Custom Cursors

So rather than use any of the existing choice of cursors for an element you can create and use your own.

Firstly though how you set any cursor? It’s pretty easy using cursor: auto;. There is a range of pre-existing values that you can choose from like pointer, crosshair, text, zoom-in, default etc.. All very functional but not very exciting.

However you use your own cursor you can just define it the way you do a background image using url(). The only difference is you MUST include a fallback which is one of the pre-existing values.

button {
    cursor: url(/images/my-cursor.svg), pointer;
}

Finally one more thing you can do with this is add coordinates. These are x and y values that indicate the cursor hotspot. They go BEFORE the comma:

button {
    cursor: url(/images/my-cursor.svg) 4 4, pointer;
}