Picture showing the USB drive links in various flavours
Demo Project

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.

Screenshot of the demo in action

To speed up the process I have used LESS styling in conjunction with a few parts of the Twitter Boostrap (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.

Tags:
  • CSS3
  • CSS3 Transitions
  • Font Awesome
  • HTML5