Using the right cursor is important to indicate to users what's going to happen when they click or select something on a page. Using a cursor that doesn’t match the result can lead to confusion or inaction.

Cursors

Default cursors

The default cursor value is auto. It will render the default cursor for specific element types, as specified by the browser’s default settings. For example, hovering over links will show a pointer cursor, and hovering over text will show a text cursor.

In most cases it’s best to keep this default setting and allow the browser to pick the right cursor.

Changing the cursor

You can override the browser’s default cursor for an element by changing the cursor value.

Even though the cursor changes when you hover over an element, the cursor property is set on the none state of an element. So, to change the default cursor when pointing on an element:

  1. Select the element
  2. Go to the Styles Panel
  3. Scroll down to the Effects section
  4. Click on the cursor icon to choose from a variety of cursor options
Webflow Cursor

As you hover over the various cursors in the cursor menu, you’ll see a preview of that cursor. You can also type in the cursor value if you know the name of the cursor you want to use.

Webflow Cursors

To see how your cursor will change when you hover over your styled element, test it in preview mode (shortcut: shift + command + p (Mac) or shift + control + p (Windows)).

At any time, you can set the cursor back to the default behavior by removing the cursor styling or setting it to auto.

 

Use case - lightbox link

A lightbox is a link element, so, the default cursor on hover is a pointer cursor. However, since a lightbox can be used to enlarge images, you may choose to change the pointer cursor to a zoom-in cursor.

Use case - inactive links

If your design includes a button that's not currently accessible, you can change the cursor on that button to the not-allowed cursor. This will show your site visitor that the button is inactive.

Webflow cursors