States

Add interactivity to your elements by changing how they look and behave in different states.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can add interactivity to your elements by changing the way they look and behave in different states.

In this lesson:

  1. Style an element in various states
  2. Return to styling the default state
  3. Remove styling of an element in a state
  4. Style the current state of link elements
  5. Understand where styles are inherited from

Style an element in various states

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.

The states dropdown menu includes none, hover, pressed and focused states as options. The dropdown menu is highlighted on the selector section of the style panel.

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.

A button element is selected and showing a green hover class state in the selector section.

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.

The states menu (dropdown)

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.

None 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.

Hover state

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.

Pressed state

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.

Focused state

You can focus on certain interactive elements, like buttons and links, without activating them by using your keyboard to tab into them. Clicking interactive elements with your mouse or pointer device both focuses and activates them. This state emulates when an interactive element is focused with either your keyboard or mouse or a finger tap.

Focused (keyboard) state

Like the focused state, this state emulates when an interactive element is focused but not necessarily activated (e.g., by tabbing into the element with your keyboard). Note that it always applies to text input fields when focused, regardless of the manner in which they were focused (e.g. with a mouse, a keyboard, etc.).

In order to make your site more accessible to visitors who rely on a keyboard for navigation, it's important to style this state so interactive element locations are obvious on the page. We suggest setting an outline on interactive elements because it will not affect the layout of the element.

Visited state

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.

Placeholder

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.

Step one on the left, select the input field of a form. Step two on the right, select the placeholder state from the dropdown states menu.
Select an input field in your form and open the States dropdown menu in the Selector to style the placeholder.
Checked state

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.

Return to styling the default state

When you’ve finished styling your states, you can go back to the default none state by doing any of the following:

  • Select “None” from the States dropdown menu
  • Press ESC on the keyboard (this also deselects the current element)
  • Select a different element

Remove styling of an element in a state

To remove a custom styling or all styling from a state:

  1. Select the element
  2. Select the state from the States dropdown menu
  3. Remove any styling (in blue)

Style the current state of link elements and tabs

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.

Current state (green tag in the selector)

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.

A link element is selected with a current state selected in the selector section. There are 3 selectors being inherited. The link element has a class called Logo block.

The Current state inherits all styles from the default "None" state.

Selecting the current state of a link

To access the current state of any link block, text link, button, nav link:

  1. Select your link element and press D to open the link settings
  2. Select the page option and choose the current page from the dropdown (if your link is on the home page, select the home page)
  3. Press S to go to the style panel. You will see that the green current state is activated in the selector field if you've applied a class to your link. If not, click in the selector and select the "All links" tag from the dropdown that opens. The current state will be applied to the tag as well.
Step one on the left, select a link element. Step two on the right, select the home page from the link settings page drop down menu to link the element to the home page..
Step three on the left, while the link element is still selected, select the All Links tag from the drop down menu. Step four on the right, notice a green "current" state has been added to the All Links tag.
A navigation link called navigation item includes a current state in the selector section inheriting three selectors.


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.

Selecting the current state of a tab

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:

  1. Select the active Tab Link
  2. Assign it a class. The Current state will automatically appear.
  3. Style away

Styling the default state of a link when the current state indicator is displayed in the selector

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.

The default base class of a link element called Navigation item is highlighted in the inheritance drop down menu. The orange 3 selectors tag is also highlighted in the inheritance indicator.

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.

Understand where styles are inherited from

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.

The inheritance indicator is highlighted showing there are 5 selectors from which styles are being inherited from. The inheritance dropdown menu is highlighted as well showing the different states.

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.

A link element called Nav link is currently in the "current" and "pressed" state. A down facing carrot icon is highlighted to show the dropdown menu of the states with a blue dot indicator on the Hover and Pressed states. The hover and pressed states are highlighted with their blue indicator.


Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top