CORE CONCEPTS

CORE CONCEPTS

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Style Manager

Style Manager

New

1:56

Text Style Inheritance

Text Style Inheritance

New

3:18

Interaction

Interaction

New

States

States

New

2:47

Transitions

Transitions

New

2:40

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

16:00

16:00

Styling Across Breakpoints

Styling Across Breakpoints

New

Typography Styles

Typography Styles

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

Effects

Effects

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Color

Color

New

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

new course
CSS grid landing page tutorial (36min)

Lesson info

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 cursors in Webflow, and walk you through a couple use cases for custom cursors.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.