I’m trying to add a gradual transition to buttons inside elements such as the woocommerce add to cart and the form submit buttons when they change color on hover. If I apply a custom css (all 0.5s ease) to the whole elment it doesn’t seem to work. Is there a way to target these buttons inside those elements using another way?
You can add custom CSS for your elements like this to target them:
root a.button {
transition: all 0.2s ease-in-out;
}
The above will set smooth transition to all anchor elements having a class of button inside the current element.
1 Like
I’ve tried this both with the add to cart and the form submit button but it doesn’t seem to work. Am I doing it right?
One of the classes for the button inside a Form element is bricks-button.
So you could add this custom CSS for the Form element:
root .bricks-button {
transition: all 0.2s ease-in-out;
}
Another way is to create/edit a theme style and add your desired transition for all buttons in the ELEMENT - BUTTON control group.
Thank you! That worked perfectly for the form buttons.
For the ATC Woocommerce buttons I used the class single_add_to_cart_button and it worked too 