How do I add a hover state in Webflow?

Choose Hover in the States menu

Select the element. In the Style panel, click the dropdown arrow in the Selector field and choose Hover from the States menu.

A green state label appears at the end of the Selector. Webflow calls this a pseudo-class. It shows that you are styling the Hover state, not the default look. The label is not a second class you typed. A combo class is a class name you add. Hover is a state of the class already in the Selector.

While Hover stays selected, the canvas shows the styles for that state. You can edit them and see the result without leaving the Designer. When you are finished, choose None from the States menu to return to the default look. Esc also leaves the state, and it deselects the element. Selecting a different element leaves the state too.

Example: a button uses a class named Button. Choose Hover, then change the background. The resting button should keep the background you set on None. Only the hover look picks up the new color. If the resting button changed, the States menu was on None when you edited.

Change the hover look

Hover shows when a visitor moves a mouse pointer over the element. Webflow's states article says it is not possible to hover on most touch devices. A phone will not show this state the way a desktop does. Design the resting state so the button is still clear without a pointer.

You can change the background, the text color, or a shadow on Hover. You can also add a transform. Webflow's effects article lists Move, Scale, Rotate, and Skew. Open Style panel, Effects, 2D and 3D transforms, and add one while Hover is selected. The plus icon adds another transform without removing the first. A filter affects the whole element, including its children. Webflow notes that animated blurs are very slow and not recommended.

All states inherit from None, the default state. The inheritance indicator above the Selector shows where a value comes from. On Hover, an unchanged background still comes from None. A background you set on Hover is a local style on Hover.

After you add styles to a state, the dropdown arrow for States turns blue. Open the menu and blue circles mark the states that have local styles. If the arrow is blue and the resting button looks wrong, you may have edited None. Choose Hover and check that the property you meant to change is the one with a local style.

Cover a tap with the Pressed state

The Pressed state, also called active, shows when someone clicks or presses the element. It inherits styles from Hover. Webflow says Pressed is useful for hover styles that should also work on touch devices.

If the button only changes color on Hover, a phone tap may never show that color. Pressed already inherits the Hover color, so a tap can show it while the press lasts. Open Pressed and look at the inheritance indicator before you add a second color. Add a Pressed style only when the pressed moment should differ from the hover.

The label and the contrast belong on None. Hover and Pressed are feedback. Focused is a different state: it shows when someone tabs to a button or a link without activating it. Webflow suggests an outline on Focused (keyboard) so that position is visible without shifting the layout. Leave that outline in place when you style Hover.

Ease the change with a transition

A hover color that snaps is missing a transition. Webflow's effects article says transitions animate between states, and hover is a common reason to add one, so the element does not change abruptly.

Open Style panel, Effects, Transitions, and click the plus icon. Set the type to the property you changed, such as the background. Duration is in milliseconds. The default duration is 200ms, and you can change it with the slider or by typing a value. Easing sets the rate of the change. You can use a preset or type a value.

Add a transition for each property you changed. A background and a transform are two properties. Webflow says a transition left at none applies to all states automatically. Use that when every changed property should share one transition.

Return to None before you judge the resting button. The canvas keeps showing Hover until you leave that state. Choose None, then publish when both looks are right.

Reset a mistake and publish

To remove a hover style, select the element, choose Hover, click the blue indicator on that style, and click Reset. Option + click on Mac, or Alt + click on Windows, resets the style too. Reset one property when the color was the mistake and the shadow should stay.

Hover styles on Button apply to every element with Button. That is the class working as intended. To vary one button, put a combo class or a separate class on that button, then choose Hover while that class is the one you are editing. Styling Hover on Button rewrites the hover for the navbar and the hero together.

Publish the page. On a desktop browser, move the pointer over the button. The background should change, and the transition should ease that change if you added one. On a phone, do not expect the same hover. Press the button if you styled Pressed.

If nothing changes on the live site, confirm the Selector was on Hover when you set the color, and confirm this page was in the publish. If the hover jumps, add the missing transition for that property and publish again. If every button moves, you edited the shared class. Move the exception onto its own class and publish once more.