Skip to main content
Portrait picture of me in a patterned dark blue t shirt in front of a grey background

Hi! My name is John Slipper.

I do web development in Auckland, New Zealand.

Animated CSS3 USB Drives

Category: Demo Project
Picture showing the USB drive links in various flavours

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 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.

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