<a href="http://www.example.com/folder/file.zip" class="download_button">
    <div class="downloadicon">
       <div class="cloud"><div class="arrowdown"></div></div>
    </div>
    <div class="filename"><span class="value">File.zip</span></div>
    <div class="filesize">Size : <span class="value">19 MB</span></div>
    <div class="downloads">Downloads : <span class="value">72</span></div>
  </a>
.download_button {
  margin: 20px;
  text-decoration: none;
  display: block;
  width: 320px;
  height: 110px;
  padding: 1px;
  border: 1px solid #8ebd17;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #2a3807;
  text-shadow: 0 0 15px #7da616;
  font-size: 16px;
}

.download_button .filename {
  font-size: 32px;
  margin: 10px 20px 0;
}
.download_button .filesize {
  margin: 10px 20px 0;  
}

.download_button .downloads {
  margin: 5px 20px 0;    
}

.download_button .downloadicon{
  position: relative;
  float: right;
  margin: 10px;
  width: 140px;
  height: 90px;
}

@-webkit-keyframes movedown {
  0% {
    -webkit-transform: translateY(-1.5em);
    opacity:0;
  }
  50% {
    -webkit-transform: translateY(0);
    opacity:1;
  }
  100% {
    -webkit-transform: translateY(1.5em);
    opacity:0;
  }
}
@-moz-keyframes movedown {
  0% {
    transform: translateY(-1.5em);
    opacity:0;
  }
  50% {
    transform: translateY(0);
    opacity:1;
  }
  100% {
    transform: translateY(1.5em);
    opacity:0;
  }
}
@-o-keyframes movedown {
  0% {
    -o-transform: translateY(-1.5em);
    opacity:0;
  }
  50% {
    -o-transform: translateY(0);
    opacity:1;
  }
  100% {
    -o-transform: translateY(1.5em);
    opacity:0;
  }
}
@keyframes movedown {
  0% {
    transform: translateY(-1.5em);
    opacity:0;
  }
  50% {
    transform: translateY(0);
    opacity:1;
  }
  100% {
    transform: translateY(1.5em);
    opacity:0;
  }
}

.download_button .cloud{
  width: 140px;
  height: 50px;
  background-color: #fff;   
  border-radius: 30px;
  position: absolute; 
  top:40px;
}
.download_button .cloud:before{
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  top: -30px;
  left: 70px;
  background-color: #fff;   
  border-radius: 50%;
  position: absolute;
  box-shadow: -40px 0 0 10px #fff;  
}

.download_button .cloud .arrowdown {
  background: #aedb3d;
  position: absolute;
  top: -10px;
  left: 60px;    
  width: 10px;
  height: 40px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
  -webkit-animation: movedown 2s infinite linear;
  -moz-animation: movedown 2s infinite linear;
  -o-animation: movedown 2s infinite linear;
  animation: movedown 2s infinite linear;
}

.download_button .cloud .arrowdown:before,
.download_button .cloud .arrowdown:after {
  top:14px;
  content: "";
  position: absolute;
  background: #aedb3d;
  position: absolute;
  width: 10px;
  height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.download_button .cloud .arrowdown:before {
  -webkit-transform:rotate(45deg);
  -webkit-transform-origin: 70% 90%;
}
.download_button .cloud .arrowdown:after {
  -webkit-transform:rotate(-45deg);
  -webkit-transform-origin: 30% 90%;
}

.download_button{

  background: #aedb3d; /* Old browsers */
background: -moz-linear-gradient(top,  #aedb3d 0%, #9fcb31 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aedb3d), color-stop(100%,#9fcb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #aedb3d 0%,#9fcb31 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #aedb3d 0%,#9fcb31 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #aedb3d 0%,#9fcb31 100%); /* IE10+ */
background: linear-gradient(to bottom,  #aedb3d 0%,#9fcb31 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aedb3d', endColorstr='#9fcb31',GradientType=0 ); /* IE6-9 */

  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.