Navbar button color change on scroll

Design help General
1

Hi Webflow forum!

When scrolling, my navbar turns from transparent into opaque. When transparent the text should be white, however when the navbar gets a solid bg, the text should turn dark.

I managed to do this for the navlinks on the left, but have trouble transforming the Contact button on scroll.

What makes it more complicated is that the hover state of the button should remain the same in both the transparent and opaque navbar. Applying text bg animations for example might make the button look right in normal state, but then the hover state isn’t right.

See here:
video2920896535_5

Further to note that the button has an Outline effect, not a border. I cannot apply a border color animation.

Any tips?

Here is my site Read-Only: LINK

2

hi there,
you need to animate button on scroll, and add hover css style as !important to your page head.

simply open your css code, copy the button hover code, add it to the page header but with !important.

for example:

<style>
  .button.is-secondary.is-icon:hover {
  border-color: var(--variablename) !important;
  background-color: var(--variablename) !important;
  color: var(--variablename) !important;
}
</style>

you can use color #hex instead of variable name