Point: Animations in Studio.Design
In Studio.Design, when you set both a default style and a conditional style for an element, the difference between them is played as an animation.
For more details, check out these articles:
Style changes on hover are configured using the Hover and (in) Hover conditional styles.
Use Hover to change the entire button, and (in) Hover when you only want to change elements inside the button, like text or icons.
Step-by-step instructions
Before you begin, create a button by combining a box with elements like a text box.
1. Set the "Hover" conditional style
Select the box of the button you want to add the animation to.
Click [Conditional Style] in the upper-right corner of the right panel, then select [Hover] from the list.
If the panel is closed, open the right panel first.
Scroll down in the right panel, and under [Appearance], set the [Background Color] to the color you want the button to be when hovered over. Use the color palette to pick your color.
Adding contrast between the default color and the hover color makes the change more noticeable.
You can preview the color change in the preview box at the top of the right panel.
When you're done, click the gray area outside the screen to deselect.
2. Set the "(in) Hover" conditional style
(in) Hover is used when you want child elements (like text) inside a parent box to change their style along with the parent's hover state.
Select the text box inside the button.
Click [Conditional Style] in the upper-right corner of the right panel and select (in) Hover.
If the panel is closed, open the right panel first.
Click the [Custom Settings] button.
Under [Typography], change the [Color] to a text color that works well with the hover background color you set earlier. Use the color palette to pick your color.
You can preview the color change in the preview box at the top of the right panel.
When you're done, click the gray area outside the screen to deselect.
3. Check it with Live Preview
Click Live Preview in the upper-right corner of the screen.
In the Live Preview, hover over the button to make sure the background color and text color change as expected.
If needed, fine-tune the colors or timing for the default and hover states.
If you're editing a published site, make sure to update your site. Your changes won't appear on the live site until you do.