Lesson info

Using the right cursor plays a vital role in communicating what's going to happen when a user interacts with an element of your site. Choosing a cursor that doesn’t match the result can lead to confusion or inaction. In this video, we'll show you how to customize your cusors in Webflow, and walk you through a couple use cases for custom cursors.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Cursors are a great way to indicate what's going to happen when you click or select something on a page. For instance, here's a lightbox element. And by default, we can go to Preview, and see that on hover, the cursor changes to a pointer. Basically the default behavior for links on the web.

To change the cursor, we actually style from None. We don't have to go to Hover or any other state. And down under Cursor? We can type one in if we know the specific name, or we can simply press down on the button to see our full list.

You'll notice on hover that we can see our cursor change to give us a preview. Let's select zoom-in. We see the zoom-in cursor appear on hover. And at any time, if we want to set this back to auto, we can just remove the cursor styling.

But what if our design includes a button that's not currently accessible? Adding a not-allowed cursor is another option to make this really clear.

Let's select our inaccessible button. And we'll scroll down to Cursor. Let's change the cursor icon to not-allowed.

And we'll see it works exactly as expected.

And the same thing applies to text. Right out of the box, our cursor is set to auto, so the text cursor will show up when we hover over text elements like headings, text blocks, or in this case: paragraphs. But what if we don't want that text cursor to show up? We can go in and change it.

Let's select this paragraph, scroll down to Cursor, and click to bring up the list. And here, we'll select default. If we preview, we still have the pointer, but it's not showing the text cursor when we hover over the paragraph.

And quick note: the none cursor might have some practical applications, but it's also a great way to infuriate users whose pointers will completely disappear on hover.

Cursors: great for making changes to the default appearance of our pointer on various elements.

Related tutorial

Cursors

1:45