Upload Button (and Live Demo)

17 Responses

1. Pro Joshua Hibbert

   I decided to give these upload buttons a shot.

   Tooltips show up on hover. Thanks to @Adam Whitcroft for his gorgeous Batch icons!

   UPDATE: Here is a live version to play with (with a few improvements): http://jsfiddle.net/joshnh/XPSw7/show/

   5 months ago

2. Louis Bullock

   Yes yes yes and yes. I'd love to see this implemented online :)

   3likes

   5 months ago

3. Pro Armos Media

   These are adorable.

   1likes

   5 months ago

4. Pro Jivaldi

   Looks good Joshua.

   1likes

   5 months ago

5. Pro Joshua Hibbert

   Thank you very much, guys!

   5 months ago

6. Jason Hobbs

   Is this coded? If so, link? (I assume they are because you mentioned Adam's tooltips)

   5 months ago

7. Ben Howdle

   Josh,

   Now you can do UI as well as boss CSS...

   ...SHIT JUST GOT REAL.

   http://fc09.deviantart.net/fs71/f/2011/320/d/9/shit_just_got_real_by_dbzsgtjustin-d4ge0j2.jpg

   1likes

   5 months ago

8. Pro Justin Lowery

   These are nice. It would be neat if the percent was shown as a background color filling the circle. What would be even more awesome is having it "slosh" back and forth like a fluid while filling.

   1likes

   5 months ago

9. Pro Jack Bingham

   I think it would be cool for the pop up messages to somehow be obvious without hovering over. I.E do I have to hover over to see that it's Done? A checkmark instead of the cloud on the final step could inform the user without them having to do anything. Just my thoughts!

   1likes

   5 months ago

10. Pro Joshua Hibbert

    @Jason Hobbs No, it was done in Photoshop (I mentioned Adam's icons). I am working on a live example though (now linked to above).

    @Ben Howdle Ha! Thanks, mate :)

    @Justin Lowery I've actually been working on a slightly different concept (which you can now also see in the live example above): http://cl.ly/image/2F0K3j202N3v

    @Jack Bingham Thanks for the suggestions, Jack. I think you are right about not requiring a hover. I think I might just have the tooltips appear all the time.

    5 months ago

11. Pro Daryl Ginn

    Here's what you should do.

    - Get rid of all tooltips on the blue & green step.
    - For blue, instead of the cloud, have the %.
    - For green, a checkmark (as @Jack Bingham suggested)

    1likes

    5 months ago

12. Pro Joshua Hibbert

    Thanks, @Daryl Ginn!

    @Daryl Ginn @Jack Bingham Like this? http://cl.ly/image/0F181a3e1A2N

    2likes

    5 months ago

13. Pro Daryl Ginn

    @Joshua Hibbert Exactly like that ;)

    1likes

    5 months ago

14. Pro Matthias Deckx

    'Cute' little clouds and great colors, nice!

    1likes

    5 months ago

15. Pro Joshua Hibbert

    Thanks, @Matthias Deckx! The clouds are from @Adam Whitcroft's Batch icons.

    5 months ago

16. Pro Tyler Fry

    So good I just checked out the live version soo tasty

    1likes

    4 months ago

17. Pro Joshua Hibbert

    Cheers, @Tyler Fry!

    4 months ago