Dynamic CTA Buttons

I used this week’s design challenge to create a set of dynamic buttons.

A primary CTA button is used to indicate the most likely or desired course of action. More visual weight is given to this button. The contrast might be greater, the colors might be bolder, etc. In short, the primary CTA is more readable.

I decided to create a set of buttons that illustrates the clear primary CTA, however, once a user hovers to a different option, that secondary CTA will become the primary CTA to make it more readable. Once the user hovers away, the primary CTA indicators snap back to the true primary CTA as defined by the developer.

Animation note: Hovering over “Save” or “Back” would be the trigger for the sliding button and hovering off those words would trigger it to snap back to “Next” but the prototyping tool I used only allows for tap triggers.