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

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

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

States. They're not just for links, but they're usually used for links. You can change the way elements look and behave by adding styling on different states. This adds interactivity to almost any kind of element.

And as we're styling, clicking the States dropdown lets you select between the various states you can access and style.

And there are four states we're going to cover: None (or normal), Hover, Pressed, and Focused.

Let's start with None: the normal state. This is the basis or the starting point for all other states.

And if we select this button, which has the Beautiful Button class applied, any styling changes we make are going to affect this state.

That's None. What about Hover?

If we select the States dropdown and press Hover? We're now styling the Hover state. And it's indicated in green.

We'll keep this simple, but you can make any number of styling choices. We'll choose to change our background color to green.

And we can switch back to None, and when we hover over with our pointer, the background color changes to green. Also, notice how the current state for the selected element is shown on the Canvas. As we're styling the Hover state, we see what the Hover state looks like on the Canvas. Whatever state we're in, the changes we make will be visible on the Canvas until we deselect or otherwise leave the state.

If we click the States dropdown, we now get a blue indicator to the right of Hover. That means there's a new value that's being set in the Hover state: in this case, we changed the background color to green.

We can switch between our Hover and None states any time to make changes to either.

That's Hover. Let's do Pressed.

And in CSS this is also called "Active" but it indicates what the styling will look like while the pointer is clicking down inside the boundary of our element.

And just like Hover inherited values from the None state, pressed will do that, too, but it'll also inherit values you've entered in the Hover state that override the None state. That's why the background color on Pressed is green.

We can change the background color again, this time selecting a darker green for this example. And let’s deselect our element. If we test this out? We see all three states: Normal, Hover, and Pressed.

That's the Pressed state.

And finally, let's cover Focused.

And this state is perfect for setting styles on elements that accept input — elements we can switch to by pressing Tab on the keyboard, like text fields.

If we're styling a class that's affecting each of the text fields here on the Canvas, any changes we make will show up when that text field is focused.

Now like any great artist, you might want a really, really bold, red glow on the text field when it's focused. We can make that adjustment to the Focused state, and when we go into Preview, that styling choice is really, almost painfully evident as we focus on each of our text fields.

So, those are the standard states we can style on elements throughout our projects.