Platinum Partner
css,html5,tips and tricks,html & xhtml

How to Create an Animated Download Icon in CSS

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 {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}