You're encountering an issue where the hover color on your button is stuck on orange, even after changing the base color to green in Webflow's Slate template. This is likely due to a hover style override that's still active.
- Click the button on the canvas that you want to update.
- Make sure the correct button class is selected (e.g.,
.button
or custom class name).
2. Switch to Hover State
- In the Selector panel (top-left of the Style panel), click the dropdown next to the class name.
- Choose Hover from the list of states.
3. Update Hover Background Color
- With the Hover state active, go to the Backgrounds section in the Style panel.
- Change the Background color to your desired green shade.
- If you want to maintain consistency, use the same green or a slightly darker shade for better hover feedback.
4. Return to Normal State
- Once the hover color is set, return to the None state in the selector dropdown to avoid making permanent changes in the hover state.
5. Check for Symbol or Class Overrides
- If your button is part of a Symbol, make sure you're editing the button within the Symbol itself.
- If you’ve made any custom classes, confirm that the hover state styling is applied to the right class and not inherited from a more general class.
- Preview the site (press
P
or click Preview) and hover over the button to ensure the new color applies. - If it still shows orange, confirm there's no interaction or legacy style affecting it from another class or element.
Summary
To change your button's hover color in Webflow’s Slate design, select the button, switch to its Hover state in the Style panel, and update the Background color. Ensure there are no conflicting overrides from Symbols or inherited classes.