Currently, this video doesn't feature the visited state as it was recorded before the feature was released.

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.

Clone this projectDownload project assetsDownload lesson 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.