So I was searching for an innovative way of presenting package options to avoid the most boring comparison tables. As there is nothing really to compare here (just the number of items included in the pack and the packs’s price) i went for these CSS3-driven humongous rounded buttons. Need to tweak the details here and there but everything is in place. Browsers not supporting border-radius will render squares. Everybody is happy.
What you see here is the 5× pack currently selected, 8× about to be selected (mousedown), 12x in normal clickable element state. There’s loads of interaction frames to be shown here to fully understand the behaviour but you’ll probably figure that out…
6 Responses
So I was searching for an innovative way of presenting package options to avoid the most boring comparison tables. As there is nothing really to compare here (just the number of items included in the pack and the packs’s price) i went for these CSS3-driven humongous rounded buttons. Need to tweak the details here and there but everything is in place. Browsers not supporting border-radius will render squares. Everybody is happy.
What you see here is the 5× pack currently selected, 8× about to be selected (mousedown), 12x in normal clickable element state. There’s loads of interaction frames to be shown here to fully understand the behaviour but you’ll probably figure that out…
about 1 year ago
Pro
musHo
Nice & clean,
looking forward to see a live site with this element..
about 1 year ago
Pro
Mads Ejsing
I really like the idea. Good job.
about 1 year ago
Wonderful solution!
about 1 year ago
Absolutely amazing. Stealing it, sorry. #winning
about 1 year ago
Pro
Michel Bozgounov
Winning idea, indeed! :)
5 months ago