Hover, pressed, and focused states - Webflow CSS tutorial (using the Old UI)

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 4 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 lying 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.
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow:
help.webflow.com/courses/gett...
webflow.com
/ webflow
/ webflow

[@Webflow]

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

[@renataeger]

Perfect, thank u for the content!!!

[@jdoe27]

i love you, webflow

[@Barrrt]

Did anyone else LOL with the hoverboard reference? 0:41

[@craigwall2081]

Where did this get moved to ...with the new UI?

[@kabobchanx]

yes where is this???

[@alejandromedina1019]

If you click the dropdown in the class section you'll see it.

[@titolabruniedsg]

Is there a way to create a fixed state? Like when I click in a checkbox or if I click on a favorited button?

[@shafii]

:checked

[@itsdevgarg]

Thank you so much

[@Kevin_MK7RSR]

"Like any great artist..." 😂

[@redarus3969]

How about visited state?

[@akinbolaoluwaferanmi898]

hello i am trying to deactivate a state style buh can figure it out please can you assist me, also is it possible to roll back in webflow

[@Webflow]

Hi there Awesome, Awesome questions! 1. To deactivate state styles, you'll need to manually remove each style that is set in that state. Simply alt-clicking on the blue indicators will remove them. 2. You can restore a previously saved backup of your Webflow site by using the built-in Versions feature. Read more here: university.webflow.com/article/how-to-restore-a-backup-of-your-webflow-site I highly recommend that you check out our University Tutorials to learn how to use Webflow and best practices to translate your ideas into designs faster. university.webflow.com/

[@Gauravsharma-gs9dt]

which software you are using for css development??? ^o^

[@Webflow]

Hi there! What you see in the video is Webflow: a professional web design tool and hosting solution which lets you build dynamic, interactive, responsive websites visually without having to code. Check it out! www.webflow.com

[@sergiod1618]

how we can styling children elements on parent hover?

[@luketype4242]

How do you remove a state? I can't seem to work out how to delete the hover state. Thanks

[@Webflow]

You want to clear all styles while you're in the hover state.

[@STARIMANCE]

How to delete hover?

[@fervent2078]

How about cover state? How to style cover state, help pls.

[@Webflow]

I think you may be referring to object-fit cover: webflow.com/feature/object-fit-support If I'm mistaken, can you please further explain your question so I can help?

[@tochidioka6019]

Hi webflow, how can i make a state active even when the link has been pressed. A good use case is my navbar.

[@Webflow]

Active state is only applied when the URL of the current page is the same as the URL in your link element. If you need that active state style applied on other elements, i would suggest creating that same style on the other element with a new classname. Hope this helps :)

[@tochidioka6019]

@@Webflow Thanks for your quick response but it doesn't help. To explain my problem a bit further, if the color of my navlink is white on the none state, and I change it to blue on the hover state. Now, after I have pressed the navlink and I'm on the current page, browsing, how can I ensure the navlink remains on blue?

[@Webflow]

Can you post this question and your project's read-only link on our forum? That way we can see exactly what you're talking about. discourse.webflow.com university.webflow.com/lesson/share-your-site

[@yaiirable]

The narrator reminds me of Chef John from Food Wishes

[@shirazigs]

Is the states option deleted from Webflow? For about 30 minutes I wasted my time to find the states!

[@Webflow]

The states option has been moved to this dropdown arrow: share.getcloudapp.com/NQu4eprj Hope this helps 😀

[@yoozer8741]

It would be great to also tell us, how to get rid of a hover state. Doesn't work for me at all...

[@Webflow]

To remove a hover state, make sure styles in that state are removed/cleared. For example, if you see any styles that are highlighted in blue in that state, click on it, and reset it. Hope this helps 😀

[@yoozer8741]

​@@Webflow Well first of all, i don't want to reset gazillion of styles to get rid of one state and second it doesn't work that way in some cases. In my case i wanted to remove a hover state, where i changed the bg gradient on mobile. The style was orange, not blue. But when i klicked, i could only reset it to a previous version, not the non state. So i had to rebuild my 3 layers from the non state from scratch. Pretty tedious. Guys, you need to build a proper desktop app, these webtools are sluggish and you can't have right klick actions. On desktop i could just right klick and delete state, or copy/paste all images & gradients by rightklicking the BG module. Also i'm getting logged out over & over again, although i have a pretty stable fiber connetion. This is costing me so much money:((

[@LanceSalTurner]

How do you remove a state in 2022?

[@Webflow]

Hi there. Great question. Just go to the state that has styles applied to it and remove them. Here is a video that may help: share.getcloudapp.com/6quGxxbO

[@JeremyBank]

This is really out of date.