Over a million developers have joined DZone.
Platinum Partner

How to Create an Animated Download Icon in CSS

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

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.


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">

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.

    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);


The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


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 }}