<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 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.