How to style a hover state in Webflow?

Hover states add interactivity and visual feedback to elements like buttons, links, and cards. Webflow makes it straightforward to style hover states directly in the Designer without writing any CSS.

Styling a hover state step by step

1. Select the element you want to style (e.g., a button)
2. Open the Style panel on the right
3. At the top of the panel, click the States dropdown — it typically shows "None" by default
4. Select Hover from the list
5. The Style panel label changes to show you're editing the hover state
6. Adjust any properties — background color, text color, border, shadow, opacity, transforms, and transitions

Any changes you make while the hover state is selected only apply when a visitor hovers over that element. All other states remain unchanged.

Adding transitions for smooth effects

A hover state that snaps instantly between colors looks abrupt. To animate smoothly:

1. With the element selected, scroll down in the Style panel to the Transitions section
2. Click the plus icon to add a transition
3. Choose the property you want to animate (e.g., background-color)
4. Set the duration (200–300ms is a good default)
5. Pick an easing curve (ease or ease-in-out works for most cases)

Add transitions on the base state (None), not on the hover state. The transition defines how the property animates between states.

Available states in Webflow

Beyond hover, Webflow supports several pseudo-classes:

• None — the default/base state

• Hover — when the cursor is over the element

• Pressed — while the element is being clicked (active state)

• Focused — when the element has keyboard focus

• Visited — for links that have been clicked before

• Focus-visible — focus from keyboard navigation specifically

You can stack these to create rich interactive feedback. A common pattern: style hover for color changes and pressed for a slight scale reduction to simulate a button press.

Tips for effective hover states

• Keep changes subtle — small shifts in color, opacity, or shadow work better than dramatic transformations

• Always add a transition — instant changes feel broken to users

• Test on mobile — hover doesn't exist on touch devices, so ensure the base state is usable without the hover effect

• Use transforms (scale, translate, rotate) for performant animations that don't trigger layout recalculations