Point: Animations in Studio.Design
In Studio.Design, when you set both a default style and a conditional style on an element, the difference between them plays back as an animation.
For more details, see the following articles:
Style changes that happen when you hover the cursor over an element are set using the Hover and (in) Hover conditional styles.
Use Hover to change the entire button, and (in) Hover to change just the text or icons inside the button.
How to create one
Before you start, create a button by combining a box with elements such as a text box.
1. Set up the "Hover" conditional style
Select the box of the button you want to animate.
Click [Conditional Style] at the top right of the right panel, and select [Hover] from the list.
If the panel is closed, open the right panel.
Scroll inside the right panel, and in the [Appearance] section, set the [Background Color] field to the background color you want when the cursor is hovering over the button. Use the Color Palette to set the color.
Adding contrast between the default color and the hover color makes the change easier to notice.
You can check a sample of the color change in the preview box at the top of the right panel.
Once you've finished setting it up, click the gray area outside the screen.
2. Set up the "(in) Hover" conditional style
Use (in) Hover when you want the style of a child box (such as text) to change at the same time as the parent box's hover state.
Select the text box inside the button.
From [Conditional Style] at the top right of the right panel, select (in) Hover.
If the panel is closed, open the right panel.
Click the [Custom Settings] button.
In the [Color] field under [Typography], change the text color to one that pairs well with the background color you set for the hover state. Use the Color Palette to set the color.
You can check a sample of the color change in the preview box at the top of the right panel.
Once you've finished setting it up, click the gray area outside the screen.
3. Check it in Live Preview
Click Live Preview at the top right of the screen.
In the Live Preview screen, hover your cursor over the button and check that the background color and text color change as expected.
If needed, fine-tune the colors and timing for the default and hover states.
If you're editing a published site, update your site. Your changes won't appear on the published site until you do this.