The joy of downloading something from a website – does life get any more exciting? I can’t imagine how! And that means web designers should pay close attention to file download interfaces. So many files like images, videos, and plugins can be shared through direct HTTP download. Many freebie websites even release icon sets and PSD files meant to be shared around the world.
But you need more than just a nice layout to bring attention towards your downloadable content. In this tutorial, we will learn how you can build a simple animated download button using only CSS3. The button can display a filetype along with the file’s size in KB/MB/GB. Everything is animated using transition effects and some careful HTML tags. Have a look at demo to see the final result.