Book buying options - On hover [ShelfJoy]

Hey Dribbble 👋,

This design shot is about click states of "Buy Now" button that I worked on during my time at Wingify. When clicked on the CTA, the button gives buying options/choices to the user and also offers to remember their choices for future purchases.

More details: On ShelfJoy, the books were planned to be linked either with Amazon or Barnes & Noble because of their easy and straight affiliate programs. And we wanted to give users the freedom to buy the books from their favorite or preferred online stores, remember their choices for future purchases and also to go back and change that preference using the same button. Hence the button had 3 states:

- 1️⃣Idle: The default state is just a button with a copy "Buy Now" that just informs that this button will let you buy the book you're looking at
- 2️⃣Clicked / Selecting: When clicked, the button expands to an option box that gives the user options to select one of their preferred online stores. This state also gives the user a choice to remember their preference so they don't have to select the same every time.
- 3️⃣Selected: Once the user selects an option and also checks "Remember my choice", the button changes its copy from "Buy Now" to a copy with a format of "Buy from {user_preference}". In this example, the user selected Amazon as his/her preferred buying option, so the button's copy changed to "Buy from Amazon".

Unfortunately, we never got around developing this and stuck with only one option to buy books from i.e. Amazon. 📚🔖

BTW, if you're still interested, here's a quick example of how a shelf looks like with "Buy Now" CTA: Example shelf: Best realistic books on the Afghan & Iraq war
---
Press L to show some ❤

Find me on the Internet: Portfolio | Blog | Facebook | Twitter | Instagram | LinkedIn