INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

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

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

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.