This concept combines a buy button with a quantity selector, making it easy for the user to add an item to their cart and increase it's quantity without moving their mouse/focus. The middle area is a text field, so the user can manually enter the quantity if they wish.
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
over 1 year ago
@Chris Allen nice debut, welcome to dribbble
Thanks Fabio! I'm really looking forward to being a part of this community.
Great debut!!! welcome to the game.
Great concept, welcome :)
Pixel perfect. Nice! Would love to see these on a retina display.
Wow this is some lovely work and has earned you a follow from me :P
Interesting design! Look forward to seeing more. Welcome to Dribbble!
great debut mate ! :)
Very crisp Chris. How would the user submit once they've chosen the quantity though?
As soon as the user clicks on the Buy button, the product/item would be added to their cart. They can then adjust the quantity from the button itself without having to view their cart. Once they're done shopping, they would click a checkout button and continue from there...
@Chris Allen Ah I see, very smart. Might be a little confusing at first, but I'm guessing there'd be some feedback to show the increase of items in the cart?
The quantity selector is just perfect!
That's amazing! Welcome to dribbble!
Great debut shot. Love this!
by Andrew Gomez
Just a rebound of Chris Allen's ingenious button design. Feedback welcome!
over 1 year ago
by Ed Chao
I thought it was confusing to buy and then +/-
so I put it together more logically. +/1 and then buy :)
by Josua Leonard
I love your dynamic shape, inspires me.
This one easier to click, few pixels up, few pixels down.
Grouped, bold color.
Download the PSD for Free: http://cl.ly/HF6Y
Very cool rebounds @andrewgomez, @edchao, and @patsyleonard.
Anyone interested in downloading the PSD can find it over on my site: http://ckcallen.com/freebie-yin-yang-button/.
BTW, since I'm new I don't know if this kindof thing is allowed. I'm probably going to pay and go Pro, but is it ok to link back to my personal site where the file is hosted?
by Andrey Maxim
1. Press F to free your cookies and feel free.
2. After that Download PSD
by Adam Bubeníček
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.
Went Pro so I could easily attach the PSD. I felt dirty linking back to my website just to host files when Dribbble only costs $20!
by Maciej Jasiński
just a simple playoff shot..
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