Animated CSS3 USB Drives
Ever wanted buttons styled like actual physical USB flash drives? ...Probably not, but here's some just for fun!
After finding a tutorial on how to make button images in Adobe Illustrator that looked like pocket USB drives, I decided to have a quick experiment with achieving the same, but purely using HTML & CSS.
This demo is what I came up with. Hovering over the button causes the cap of the USB drive to 'open' (a la CSS3 transition) and clicking highlights the text.
To speed up the process I have used LESS styling in conjunction with a few parts of the Twitter Bootstrap (reset styles, mixins and sprites). I have also added on the icon set Font Awesome for Bootstrap to get great future proof vector icons for the caps.