Dynamic CTA 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.

--

--

--

Product Manager with a background in computer engineering, design, business consulting, and agile methodology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

January 2017 eSummit: Innovate is a Verb

LinkedIn Jobs Concept: Job Post Highlights

Getting started with using Sketch plugins

Great Mind Mapping Tools of 2017

The Power of Eye Tracking Studies: What Type of Research You Can Do in Different Industries

Key Lessons For Setting Up User Research Labs

Chinese zodiac compatibility

How to ensure diversity in your designs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Julia Deutsch

Julia Deutsch

Product Manager with a background in computer engineering, design, business consulting, and agile methodology

More from Medium

BCare- Nanny finding app

How To Make Glassmorphism Effect In Figma

Redesign for Others: Fox Theatre Booking Experience with Kiosk

How to get into design