Over a million developers have joined DZone.

How to Create an Animated Download Icon in CSS

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".

Topics:

Published at DZone with permission of Paul Underwood , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}