I really like Chris Allen's concept, so I decided to realize it.
Let's try it! :)
Edit: Don't try to buy nothing, this button doesn't like it.
12 months ago
That is just awesome work!
Thank you @Bart Ebbekink :)
Holy Guacamole! This S**t is awesome
Hahaha :D Thanks :D
Fantastic dude... love the animation. In Chrome, though, it's a little jittery - can that be smoothed out?
@Adam Bubeníček By the way, we've been using this button for a while now at Peapod (in the mobile app), as well as on the Stop & Shop Shopping List application. You can see how we make it work here (just click the "Try It" button and then enter a NYC zip code like 10001): https://www.stopandshop.com/listmaster/user/login.htm
The original idea by @Chris Allen is so clever and this execution very well done, I love it!
@Chris Allen thanks man, and you're right, that number isn't calm very much. Now it should be ok, check it out :)
Huh, I thought it is just unused concept, I'm surprised. These buttons aren't animated, but still great :)
Thanks @Adam Amran :)
@Adam Bubeníček Niiiiice. Much smoother now. Yeah, so the original concept of having the buy button turn into the quantity selector was created by my boss - I merely put a facade on it :)
Not sure if you checked out our list application I linked to above, but when you have your cart (in this case, list) always present, you don't need to click again to actually buy the product. Once you click on the button for the first time, you visually see the product added to your list - from that point on, you're simply adjusting the quantity or removing the item from the list entirely.
@Chris Allen Yeah, I saw that and I have to say it is really good and easy way to add stuff to your cart, my button above works a little bit worse :)
@Adam Bubeníček I'd say the opposite - your button is better! I've asked my developers to take a look at what you did to think about how we can animate the transition between buying and changing the quantity.
One more suggestion for you - hover effects on the minus and plus buttons would be helpful, and maybe a tooltip when hovering over the middle section that says (click to buy). Now, in our button, you can actually click into the middle to directly edit the number so that you don't have to repeatedly click the plus button to get to a larger number. Personally, I don't think it's necessary to click to add to cart, then change quantity, then click again to purchase - only have the user click once to buy, then change the quantity from "1" only if they need to.
@Chris Allen Thanks, and you're totally right, I created this button just for fun, I know these controls should have some hover effects and maybe some help, because using it is not intuitive at all. But at the moment it was just very difficult, I coded it wrong in this way, so you can enjoy only the look and animation right now :)
cool idea! :)
@Luboš Volkov Yes, very cool idea, just not mine :(
nice style and smooth animation
Thank you Jorge :)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter