How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.
TL;DR
- Select the button in Webflow Designer.
- Switch to Hover state in the Style Panel.
- Change the hover color in the Background or Text Color settings.
- Check for global classes that might override styling.
- Publish and test to confirm the update.
It sounds like the hover color for your button is still using the default Slate design styling. You need to adjust the hover state in Webflow’s Designer to override the orange color.
1. Select the Button
- In Webflow Designer, locate the button you want to modify.
- Click on the button to ensure it is selected.
2. Open the Hover State
- In the Style Panel (right-side settings panel), find the States dropdown just above the styling controls.
- Click on States > Hover to switch to the hover styling mode.
3. Change the Hover Color
- Under Background or Text Color (depending on which color is changing), click the color swatch.
- Set it to green (or any other desired color).
- Ensure any existing effects (like transitions or filters) aren’t affecting the color.
4. Check for Additional Classes
- If the hover color still appears incorrect, check if the button has a global class (e.g., “Button” or “Primary Button”) that applies styles elsewhere.
- Modify the hover settings at the global class level instead of individually.
5. Publish and Test
- Click Publish and check the live site to confirm the hover color updates correctly.
Summary
To fix the hover color, select the button, switch to Hover state, update the color, check for global class overrides, and publish the changes. If the issue persists, ensure no custom CSS or interactions are overriding the Webflow styles.