Add interactivity to your elements by changing how they look and behave in different states.
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.
You can add interactivity to your elements by changing the way they look and behave in different states.
In this lesson:
To apply different styling to an element in different states like the hover state, open the States dropdown menu in the Selector of the Style panel and select the state you want to style.
When you select a state from the States dropdown menu in the Selector, a green state class, also called pseudo-class, will appear at the end of the selector field. This indicates that you are now styling that state for your element.
You can make any number of styling choices. The styling changes you make here are what users will see when they interact with this element.
Whatever state you're in, the changes you make will be visible on the canvas until you deselect or otherwise leave the state.
Choose the state you want to style from the dropdown menu. Now, any change you make in the Style panel will be saved for the selected state.
The None state is the default state of elements. This is how the element looks by default.
Once you choose and style another state, you can return to styling the default state by choosing “none” from the States dropdown menu.
The hover state shows when you hover your mouse pointer on an element. It’s not possible to hover on most touch devices so be aware of this when designing for smaller breakpoints.
The pressed or active state is the state that shows when you click or press on an element. This state inherits styles from the hover state as pressed is actually a state of the hover state.
It’s possible to focus on certain elements, like input fields in a form, before activating them by pressing the TAB ↹ key on the keyboard. The focused state emulates this state and is often styled for input fields and links.
The visited state is the state of a link that's been visited. This state inherits styles from the none state.
For the visited state, you can only style the text color, the background color, and the border color. The background color will only appear if it is already set in a different state.
This state will be available in the States dropdown menu for form fields. It allows you to style the placeholder text separately from the typed text which inherits the typography styling of the default state.
For the placeholder text, you can style the typography, the background, and shadows.
This state will be available in the States dropdown menu for form checkboxes and radio buttons that have Custom styling enabled in their Element settings. It allows you to style the checked state of the checkbox or the radio button.
When you’ve finished styling your states, you can go back to the default none state by doing any of the following:
To remove a custom styling or all styling from a state:
Link elements also have a current state. When you add custom styling on the Current state, it will reflect how your link element looks when a user is in that state.
The Current state is automatically added to the the All Links tag or the class of a selected link element when this element is linked to the current page, section, or tab.
The Current state inherits all styles from the default "None" state.
To access the current state of any link block, text link, button, nav link:
You can also select the page section option in the link settings. The current state will appear in the selector field for that element when you scroll to that section of the page. This is useful for styling buttons or links that are fixed as you scroll.
After you style the current state, you can update the link settings and link your button and link elements to any other pages or page sections.
You can choose to style the Current tab differently than the normal tab to differentiate between active and inactive tabs. For example, you can edit the font color and background color to be different than a normal tab.
To style the Current tab:
There are several ways to remove the current state when you want to style the default state. The quickest way to do so is by selecting the default, base class in the Inheritance menu.
Alternatively, you can temporarily remove the link setting in the Element settings panel, style the link's class, then re-configure the link setting. If you do not wish to remove the link setting, duplicate the link element, remove the link setting on the duplicate element, edit the class, then delete the duplicate element when you’re done.
All states inherit styles from the “none” state. “Pressed” also inherits styles from the “hover” state. You can see from where styles are being inherited from by clicking the inheritance indicator right above the selector field.
After you have added styles to a state, the States menu dropdown icon will turn blue. And when you open the States dropdown menu, you will see blue circles indicating that there are local styles in that state.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback