This guide will review some of the best practices for button systems that focus on building recognizable visual patterns with the Anima toolkit.
​

Designing a distinct visual language for CTA buttons is important to building the interaction pattern of your site. Best practices include high contrast colors, straightforward labels, and strong context.
​

When users interact with your CTA and other links, adding a hover state promotes accessibility and pattern recognition. Launchpad provides several options for automating hover states.

This section will cover how to automate a fade out hover state that provides a visible color change to the normal state of your button.

Please refer to the FadeOutHoverState template for this guide.

Step 1: Our button for this example is a yellow rectangle with centered text. I created a symbol for this button labeled 'button/NormalState' to serve as our CTA. I also created another green button for our hover state and created a second symbol labeled 'button/HoverState.'

Step 2: As seen in the artboard labeled 'Demo,' I inserted both symbols and centered them on the artboard. I also made sure that the NormalState symbol was the top layer. I selected the NormalState and clicked on 'Hover' in Launchpad, which brings up a customization panel. Scrolling down through the available animations, I located 'Fade Out' and extended the duration to 0.8 seconds to emphasize the change. I also added a link to the NormalState symbol using Launchpad.

Make sure to add the link to our top layer, which is our NormalState button in this example. Although this symbol will fade out, it will still exist as the top layer.

Step 3: Lastly, I grouped both states into one folder called 'Button' and created a symbol by the same name to keep my design organized.

Check out the final product in this preview.

For buttons with 3 states, we can use Anima interactions to build the button into an interactive component.

Select the button symbol and click Prototype Tab > Interaction > Create - This will start Anima's Interaction Editor, right inside Sketch.

Please refer to the SelectedState template for this guide.

Step 1: Starting with the previous FadeOutHoverState example, I removed the hover state and added in a new symbol to use as the selected state for the button. In this case, the selected state is a blue background and white text.

Step 2: Now that we have a symbol for each state, the component can effectively switch between the symbols easily. I grouped our symbols into the folder labeled 'Button with 3 States' and clicked on 'Interaction Design' in the Timeline panel. I used 3 total states in this interaction, where only one symbol is visible at any time. I did this by reducing the opacity to 0% on the other symbols (you can also click on the eye icon in the Timeline preview layer list).

Step 3: We need to add an action for each trigger to complete our component. In Timeline, click on any state in the layer list on the left to use the whole group as a trigger. I clicked on 'state1' in the layer list and used the lightning icon (you can also use the Action + button in the inspector on the right) to add a transition to 'state2' if the mouse enters the group. I also added a return from states two to one if the mouse moves away. Using 'state2', I added a final transition to 'state3' when the user clicks on the group.

Check out the interactive button here.