Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

Animated Download Button Effect with CSS3 Transitions

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

Live Demo - Download Source Code

But you need more than just a nice layout to bring attention towards your downloadable content. In this tutorial I want to demonstrate 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 my demo to see the final result.

Getting Started

Since this doesn't require any JavaScript all we need is a simple HTML file along with an external stylesheet named styles.css. The larger button will use an icon from Entypo so you should grab a copy of that webfont library as well. I'm keeping all the CSS assets and Entypo fonts in a /css/ folder at the same level as my index.html file.

  

CSS3 Animated Download Buttons

Download.zip11.5 MB


Download.zip11.5 MB

This block contains all the HTML in my page body. Each of the two buttons are contained within a div using classes .center and .centerbig. You don't need to use these divs in your own layout. I just have these centered containers to help with positioning. Since each button doesn't have a fixed width it's not easy to keep it centered without text-align: center. Unfortunately this also centers the animation which isn't exactly what I'm going for.

Otherwise the internal code of each center container should be pretty straightforward. Both anchor links have a class of .dlbtn which adds the styles + transition effects. Notice both of them also have a span with the class .details containing some extra metadata.

The only difference would be on the larger button with an extra class of .big. This also has an extra icon using the class .dlicon. I've used a simple HDD download icon from Entypo, but the pack includes many other choices you might like instead. Just gloss over the character map page to find HTML entity codes needed for changing the icon design.

Page & Button Styles

The page itself is created with a single wrapper container. This spans a maximum width of 850px but can also be responsive down to smaller screen sizes. The buttons display as fixed-width because the padding values are in pixels.

/** page structure **/
#wrapper {
  display: block;
  max-width: 850px;
  padding: 45px 35px;
  margin: 0 auto;
  background: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

.center {
  width: 20%;
  margin: 0 auto;
}
.centerbig {
  width: 40%;
  margin: 0 auto;
}

All the centered page divs just need a certain width value which can adapt to the responsive layout. Normally we could use the centered text alignment, but unfortunately it messes with the animation.

/** download button effect **/
a.dlbtn {
  display: inline-block;
  position: relative;
  height: 45px;
  line-height: 40px;
  overflow: hidden;
  padding: 0 30px;
  font-size: 12px;
  font-weight: bold;
  color: #c0c0c0;
  background-color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #ddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

a.dlbtn:hover, a.dlbtn:focus {
  color: #fff;
  padding-right: 90px;
  background-color: #5381bf;
  border-color: #5381bf;
}

Next is a block designing the button and how it behaves during hover. When hovering we see a clean blue background and border take over the design. Also the right side of the button expands from 30px to 90px padding. This makes room for our extra details box to appear.

Since the button can use a fixed height value it makes positioning much easier. Line-height keeps the text vertically aligned while we also know how to position the details panel accordingly. Each of the transition properties will run in standards-compliant web browsers. Otherwise the details should just appear without any animated effects.

a.dlbtn .details {
  position: absolute;
  line-height: 11px;
  top: 4px;
  right: -15px;
  opacity: 0;
  background: #49668c;
  color: #fff;
  text-align: center;
  padding: 3px 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: right 0.4s linear, opacity 0.25s;
  -moz-transition: right 0.4s linear, opacity 0.25s;
  transition: right 0.4s linear, opacity 0.25s;
}
a.dlbtn .details .size {
  display: block;
  padding-top: 3px;
}

a.dlbtn:hover .details, a.dlbtn:focus .details {
  right: 8px;
  opacity: 1;
}

Since the details can't show up beside the text I'm using absolute positioning to solve this little problem. This positioning places the details box outside of the button, and then animates inside. It gives a small bouncing effect when the transition is completed.

Also notice towards the bottom I've split up the animation into 2 parts. The right property animates the details into the button at the same speed that the button expands. But the details will fade in & out a bit quicker, giving a smoother feeling to the effect. You can play around with these values to find a more suitable value if needed.

Bigger Download Buttons

Towards the bottom of my stylesheet I've added an extra .big class for the larger buttons. This style will add some extra padding, increase the font size, and include the Entypo icon within the details box.

/** large download button **/
a.dlbtn.big {
  height: 115px;
  line-height: 115px;
  padding: 0 80px;
  font-size: 26px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
a.dlbtn.big:hover, a.dlbtn.big:focus {
  padding-right: 160px;
}

a.dlbtn.big .details {
  top: 10px;
  font-size: 18px;
  line-height: 20px;
  padding: 6px 15px;
}

a.dlbtn.big:hover .details, a.dlbtn.big:focus .details {
  right: 15px;
}


a.dlbtn .dlicon {
  display: block;
  font-size: 55px;
  line-height: 30px;
}

Since I've kept the original class .dlbtn all the properties should carry over. I'm just going to overwrite some of them like the padding and font size. This will cut out a lot of extra CSS while still being economical about which properties to overwrite.

Towards the bottom you'll notice a class name .dlicon which adjusts some other basic properties. This class is tied into the Entypo icon font files which I've added at the very top of my stylesheet:

@font-face {
  font-family: 'entypo';
  src: url('entypo/entypo.eot');
  src: url('entypo/entypo.eot?#iefix') format('embedded-opentype'), 
       url('entypo/entypo.woff') format('woff'),
       url('entypo/entypo.ttf')  format('truetype'),
       url('entypo/entypo.svg#svgFontName') format('svg');
}


.entypo {
  font-family: 'entypo', sans-serif;  
}

Adding this class onto any element will change the internal font family to the Entypo icon font. This is why we can use HTML entities for displaying icons naturally in the browser. Simple, clean, and easy to update for any webpage layout.

/** responsive styles **/
@media screen and (max-width: 620px) {
  h1 { font-size: 2.7em; }
  .center { width: 30%; }
  .centerbig { width: 70%; }
}

@media screen and (max-width: 480px) {
  h1 { font-size: 2.2em; }
  .center { margin-left: 0; }
  .centerbig { margin-left: -20px; }
  
  a.dlbtn.big { padding: 0 70px; }
  a.dlbtn.big:hover, a.dlbtn.big:focus { padding-right: 150px; }
}

This last block of code is at the very bottom of my stylesheet. Since the layout is responsive I've included some media query updates to keep the buttons in a natural position no matter the screen dimensions.

If you want to change any of these styles my demo is a great place to start. All the codes are free and open source to edit and copy for any project work.

I would imagine that this download button can fit nicely onto any type of website. Blogs, galleries, forums, anything where users are expected to download some type of content. This button is also easy to restyle for matching your own website's color scheme. Feel free to download a copy of my source code and see how you could fit this animated button into future projects.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Jake Rocheleau

First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

One response to “Animated Download Button Effect with CSS3 Transitions”

  1. Thanks a lot need this download button on button. Glad I could find it here.

Leave a Reply

Your email address will not be published. Required fields are marked *