Change button colour on hover background block

[AtelierM3 (Thomas)]

Hi all,

I hope someone can help me with this problem:

I want a big div block with a button in it, and I want the button colour to change when you hover over the entire block. I’ve already tried the ‘hover trigger’ and added the button in the 'Affect different element(s) checkbox.

Only thing is changing colour doesn’t seem possible, ‘Transforms’ only.
Is there something I am missing here?

Thanks in advance!
Thomas

[michal_kampa (Michał Kampa)]

Hi,

I think I’ve done it, please see and clone that site:
https://webflow.com/website/button-change-colour-on-sth-else-hover

It’s somewhat of a hack: you have a div (button body) and another div inside it (button background). The interaction is that when you hover over a Big div, button background changes opacity to 0%. Then you can see the button body which has regular hover over state (as mine isn’t a link I changed the cursor to pointer).

Maybe there is a more elegant method (let me know) but without a custom JS I couldn’t think of anything else.

Cheers!

[AtelierM3 (Thomas)]

Hi Michal,

Thank you so much for your solution! Great that you took the time to create an example.
I will be trying to use this in the upcoming days. It seems like something that could be added to Webflow without being a hack don’t you think?

Best,
Thomas

[AtelierM3 (Thomas)]

Hi Michal,

I managed to experiment with it, and although I got it to work the “Position: Absolute” value doesn’t work in the current setup I have, since the webpage is responsive… I can’t seem to think of any workarounds to this problem, do you by any chance have an idea?

Thanks again!
Thomas

[michal_kampa (Michał Kampa)]

As my favourite developer saying goes “Works fine by me”

Joking aside: despite position: absolute it’s also worth to set up the button background size to 100% (both width and height). That way it’s always occupies full size of its parent container. That way you can change the button dimensions and the yellow bg will always fill it.

Please check the updated version:
[https://webflow.com/design/button-change-colour-on-sth-else-hover](https://preview.webflow.com/preview/button-change-colour-on-sth-else-hover?preview=ab84dd1a75e4f79e5c94647807b11dcc)

[AtelierM3 (Thomas)]

Hi Michal,

Thanks a lot for your help! I managed to fix in it a slightly different way.
So I thought I’d share the solution here in case someone else might want to do the same.
Must be a no-brainer for developers, but helped me out a lot!

By adding this small line of custom code it was fairly easy to add the effect:

<style>
.div-background-name:hover .div-button-name {
  background-color: #fdbb03;
  color: #fff;
}

Again, many thanks for your help Michal!

[michal_kampa (Michał Kampa)]

Looks neat
Please share your work when you finish the website.

Good luck man!