Streaming live at 10am (PST)

Dynamic style settings for hover colour

I’m using the dynamic style settings to set the border colour for a button.

Can I use dynamic style settings to set the background colour for button hover?

Screen Shot 2021-05-27 at 10.42.18 pm


Here is my site Read-Only: Webflow - More Like Jesus

Hi @Steve-K thank you so much for checking if it’s possible to pull a dynamic color for the hover state on an element.

We don’t have native functionality available for that, though you could potentially target the hover state style with CSS in a dynamic embed which pulls a color from the collection field.

So the embed could look something like this:

<style>

.class-name:hover {
background-color: #FFFFFF;

}
</style>

You would then replace the #FFFFFF with the color field mapping from your collection, or a text field with the hex code. I hope that this helps!

Happy designing! :grin:

Thank you. Do I place the embed within the button?

@Steve-K Just needs to be on the page. Above the element is my preference.

OK. And how do I map the #FFFFFF to the colour field?