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?

@webdev I’ve just found this topic as I needed the same exact thing. I did the embed in the collection list so that I have the variable values to reference in css. It is not working and I’ve just made my own post about it but haven’t gotten any reply yet (although it was only a couple of days ago). I’m just really needing to fix the problem. it almost seems like surely it’s a bug in webflow. Here is what I have but it is NOT pulling the post bg color in the embed style tag even though other parts of the collection item reference it just fine. Here’s my other post: