HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 134 posts at DZone. You can read more from them at their website. View Full User Profile

How to Create an Animated Download Icon in CSS

10.17.2013
| 3600 views |
  • submit to reddit

When you place a call to action on a webpage, you normally want the visitors to do something like sign up to your newsletter or download some of your content. All calls to action should try to stand out so people focus on these areas of your website.

In this tutorial, we are going to create a CSS animation download icon.

CSS Download Icon

View the demo page to see the animation.

The HTML

First we start off by creating the HTML for the download icon. We are going to need a link, and inside this an area for the download icon.

<a href="http://www.example.com/download-content.html" class="download-icon">
    <span></span>
    Download
</a>

Styling The Download Icon

To start with, we style the text at the bottom of the icon. This text is used to explain what this call to action will be.

a.download-icon
{
    color: #333;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
}

Next, we can style the download icon by styling the span tag to create a rectangle box using the width and height properties, then we add a border to this element. Placing a border-top of transparent will hide the top border from view, creating the download box style look.

.download-icon span
{
    display: block;
    cursor: pointer;
    position: relative;
    width: 60px;
    height: 30px;
    margin: auto;
    border: 10px solid #333;
    border-top: transparent;
}

To create the arrow on the download icon, we need to use CSS pseudo selectors to create a new element using :before and :after. These will need to be absolute positioned so we can set the exact position for the arrow.

.download-icon span:before,
.download-icon span:after
{
    content: '';
    display: block;
    position: absolute;
}

On the hover event of the download-icon, we are going to create the arrow and add an animation of a bounce effect. Use the animation property to define the animation of bounce, add the time you want the animation to be completed, set the animation to loop infinite times.

On the before element, we are going to create the line of the arrow, start off by positioning it over the icon, and create the line by using the width and height properties followed by a background color.

On the after element, we can then create a triangle using a trick in CSS by making a border and setting the left and right borders to be transparent.

a.download-icon:hover span:before,
a.download-icon:hover span:after
{
    animation: bounce .5s infinite alternate;
    -webkit-animation: bounce .5s infinite alternate;
}

a.download-icon:hover span:before{
    left: 15px;
    top: -9px;
    width: 10px;
    height: 10px;
    background: #333;
}
a.download-icon:hover span:after
{
    left: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

Bounce Animation

Finally we create the bounce animation. To do this, we just need to change the position of the element up by a few pixels. For this, we use the transform property to change the translateY position -10px. This will move the element up the page by 10 pixels, at the end of the animation we need to then change the positioning back to 0 pixels.

@keyframes bounce {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(-10px);
  }

  to {
    -webkit-transform: translateY(0);
  }
}

Demo

Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)