Create A Animated Download Icon In CSS

When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content. All call to actions you 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.

#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 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. By 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 exactly 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 a 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 colour. 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);
  }
}