Override the default cursor for elements

Override the browser’s default cursor for an element by changing the cursor value.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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. 

Changing the cursor for 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
The cursor settings of the effects section is highlighted. The opacity, box shadows, 2D&3D transforms, transitions and filters effects are also in view.

Set a custom cursor for a 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.

Set a custom cursor for a 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.

On the left, the text label "Pointer" and the Apple cursor icon. On the right, a text label "Not-allowed" with a not-allowed icon.

Learn more about cursors and other effects.

Create my own custom cursors

Want to create your own playful, custom cursors? Check out A guide to custom cursors in Webflow.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top