I am trying to use the animate tab to make the hover color on a button changeable with a data binding. When I add the data binding to the hover animation, the animation data binding overwrites the data binding on the original button as well. Is this the expected result? Is there a way to make that animation pull in the data binding without affecting the button as well?
1 Like
Hello! Currently our binding feature lacks the ability to be dynamic between a standard and hover state. We will be taking a closer look at this one to build a solution for the future. For now, here is a guide for adding a hover state to a button that has styles that are bound with Builder’s Bind Data button.
Give the Button a Class Name
At the very bottom of the STYLE tab, give your button a unique class name. For this example, we’ll say “interactiveButton”. Just make sure this class name has no spaces!
Add styles for hover
In the DATA tab, find the “Custom CSS and JS” button at the bottom. This will open a grey panel with CSS on the left and JS on the right.
In the CSS panel, below the green comments, add the following:
.interactiveButton:hover{
}
The syntax to select something with a Class is a period, followed by the class name, as we wrote above. We can select the “hover” state of that element by adding “:hover” to the end of its name. That’s called a Psuedo-class selector, and you can read more about the fun tricks you can do with it here: Pseudo-classes - CSS: Cascading Style Sheets | MDN
We can place style declarations for this button inside the curly brackets, like this:
.interactiveButton:hover{
background-color: green;
color: white;
}
There are plenty of other styles that you could apply, or color types (Hex, RGB, RGBA, gradient) that you could use here, but this is a basic example 
For some elements, you may notice that these styles will now allow your button to switch to green with white text. If this does not occur, this may be because the data-bound styles are added inline with the element’s code: in other words, they are overriding the styles you want to apply on hover.
If that’s the case, you can add !important to the end of the style’s attribute, like this:
background-color: green!important;
Add a transition
While the hover psuedo-class that we’ve added is functional, it is lacking a smooth transition between its states. To fix this, we can add some custom CSS properties to the button’s STYLE tab.
With the button selected, head into the “CSS Properties” accordion in the STYLE tab. At the top of the list of CSS properties, there’s an option to add a new style.
Add your first new style. Name it “transition” and hit enter. There should now be an empty input box beside or below this property. We can add some text here that does the following:
- Specifies which attribute to transition
- The length of the transition
- The timing function or “smoothing” of the transition
- Any timed delay to the transition, if desired.
For example, I could write this in the attributes for the transition property that I added:
background-color .3s ease-in-out
The final result will be a transition on the color of the button’s background that takes .3 seconds to complete, and is super smooth.
Please let me know if you (or you, the reader) follow this tutorial and get stuck at any point. Thank you!
Hi Logan, I have the same problem. I find your solution too complex, when do you expect this will work?
Hi @Michiel ! This update is still on our radar but we do not currently have a timeline. If this is a critical feature for you I would recommend checking out our feature request board at https://ideas.builder.io/ where you can submit a feature request and vote on other submissions.
This informs our roadmap and will help us prioritize customer requests. Check it out and let us know if you have any questions!