12+ CSS Download Button Examples

This post contains a total of 12+ Hand-Picked CSS Download Button Examples with Source Code. All the Download Buttons are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Medvegio

Made by Medvegio. Simple CSS Download button with download information. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito:700&display=swap');

body {
  background: #111;
}

.button {
  width: 200px;
  margin: 150px auto;
}

.button a {
  display: block;
  height: 50px;
  width: 200px;
  line-height: 50px;
  
  /*TYPE*/
  color: #fff;
  font-size: 24px;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background: #f3a;
  
}

.button a, p {
    -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

p {
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
  
  /*TYPE*/
  text-align: center;
  
  font-family: 'Nunito', sans-serif;
  color: #fff;
  
  /*POSITION*/
  position: absolute;
  z-index: -1;
  
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 10px;
  line-height: 50px;
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 30px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}
</style>
</head>
<body>
  <div class="button">
        <a href="#">Download</a>
        <p class="top">click to start</p>
        <p class="bottom">76MB (.zip)</p>
    </div>
</body>
</html>

2. By Kasper Mikiewicz

Made by Kasper Mikiewicz. Download button with two parts, you have download both and download single option. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  font-size: 75%;
  margin: 55px auto;
  text-align: center;
}
/**
 * Customs
 */
.double-button a,
.double-button span {
  box-shadow: 0 1px 0 rgba(255,255,255,0.40) inset;
  background-color: #fd4239;
  border-color: #c13832;
}
.double-button .middle {
  text-shadow: 0 1px 0 #8d2924;
  color: #ffc1b7;
}
.double-button a:hover,
.double-button input:hover ~ span {
  background-color: #ff5048;
}
.double-button .middle:active {
  box-shadow: 0 2px 13px rgba(0,0,0,0.65) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  line-height: 36px;
}
.double-button a:active,
.double-button input:active ~ span {
  box-shadow: 0 2px 13px rgba(0,0,0,0.30) inset;
  background-color: #c13832;
  color: #641d1a;
}
.double-button span {
  text-shadow: 0 1px 0 rgba(255,255,255,0.40);
  color: #c13832;
}

/**
 * Button
 */
.double-button {
  position: relative;
  display: inline-block;
}
.double-button a,
.double-button span {
  transition: all 0.3s ease;
  border-width: 1px;
  border-style: solid;
  display: block;
  float: left;
  height: 17px;
  padding: 10px;
  text-decoration: none;
  font-size: 13px;
  position: relative;
}
.double-button span {
  border-radius: 10px;
  line-height: 20px;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -11px;
  margin-top: -12px;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
.double-button input {
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: -11px;
  margin-top: -12px;
  opacity: 0;
  z-index: 2;
}
.double-button .middle {
  text-align: center;
  font-weight: bold;
  line-height: 35px;
  height: 37px;
  width: 0;
  max-width: 0;
  padding: 0;
  font-size: 0;
  border-left: 0;
  border-right-width: 0;
}
.double-button input:checked ~ .middle {
  max-width: 90px;
  width: 90px;
  border-right-width: 1px;
  font-size: inherit;
}
.double-button input:checked,
.double-button input:checked ~ span { z-index: -1; }

.double-button .left,
.double-button .right {
  padding-right: 17px;
  padding-left: 15px;
}
.double-button .left { border-radius: 18px 0 0 18px; }
.double-button .right {
  box-shadow: 1px 1px 0 rgba(255,255,255,0.40) inset;
  border-radius: 0 18px 18px 0;
  padding-left: 17px;
  padding-right: 15px;
  border-left: 0;
}
.double-button [class*="icon-"] {
  background-image: url(http://designitcodeit.com/live/gEKMJmkmvw3X/img/icons.png);
  background-repeat: no-repeat;
  display: inline-block;
  height: 17px;
  width: 13px;
  vertical-align: top;
}
.double-button .icon-text { background-position: left top; }
.double-button .icon-image { background-position: left -17px; }

/**
 * Tooltip
 */
.double-button a:hover:before,
.double-button input:hover ~ span:before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: -7px;
  top: -15px;
  content: '';
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.double-button a:hover:after,
.double-button input:hover ~ span:after {
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  text-shadow: none;
  text-transform: uppercase;
  content: 'Download both';
  margin-bottom: 15px;
  position: absolute;
  padding: 5px 20px;
  white-space:nowrap;
  bottom: 100%;
  left: 0;
  height: 20px;
  line-height: 20px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.double-button a:hover:after { content: attr(title); }
.double-button .right:hover:after { left: auto; right: 0; }
.double-button input:hover ~ span:after { left: auto; margin-left: -60px; }
</style>
</head>
<body>
  <div class="double-button">
  <a href="#link_to_text" title="Download text file" class="left"><i class="icon-text"></i></a>
  <input type="checkbox"><span>+</span>
  <a href="#link_to_zip" title="Get them!" class="middle">Download</a>
  <a href="#link_to_design" title="Download design file" class="right"><i class="icon-image"></i></a>
</div>
</body>
</html>

3. By Brian Christensen

Made by Brian Christensen. Download button with hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
body {
  margin: 200px auto;
  width: 700px;
}

.fa-cloud {
  color: #fff;
}
.download {
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 1px #ccc;
  -moz-box-shadow: 0 0 1px #ccc;
  box-shadow: 0 0 1px #ccc;
  display: block;
  background: whitesmoke;
  height: 50px;
  width: 220px;
  overflow: hidden;
}

.left,
.right {
  float: left;
}

.left {
  background: #6EB43F;
  position: relative;
  height: 50px;
  width: 26%;
}

.left i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -17px;
}

.left .fa-arrow-down {
  color: #6EB43F;
  z-index: 99;
  font-size: 18px;
  margin-top: -28px;
  margin-left: -9px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.download:hover .fa-arrow-down {
  margin-top: -8px;  
}

.download:hover h5 {
  color: #323232;  
}

.right {
  height: 50px;
  width: 74%;
}

.right h5 {
  color: #888;
  font-weight: normal;
  font-size: 16px;
  text-transform: uppercase;
  text-align: right;
  margin: 8px 15px 0 0;
}
.right h5 span {
  color: #ccc;
  display: block;
  font-size: 12px;
  font-style: italic;
  text-transform: lowercase;
}
</style>
</head>
<body>
  <a href="#" class="download">
  <div class="left">
    <i class="fa fa-arrow-down fa-1x"></i>
    <i class="fa fa-cloud fa-2x"></i>
  </div>
  <div class="right">
    <h5>Download<span>Support til windows</span></h5>
  </div>
</a>
</body>
</html>

4. By Marina Marques

Made by Marina Marques. Download Button with flip animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<style>
body {
  font-family: "Roboto", sans-serif;
  padding: 20px;
  background: #40e0d0;
}

.container {
  padding: 80px 40px;
  text-align: center;
}

.button-group {
  cursor: pointer;
  display: inline-flex;
}

.text {
  background: #008080;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  height: 70px;
  padding: 0 25px;
  line-height: 70px;
}

.icon-cv {
  font-size: 30px;
  width: 70px;
  height: 70px;
  line-height: 60px;
  box-sizing: border-box;
  border: 4px solid #008080;
  border-left: none;
  transition: 600ms transform ease-in-out;
  transform: rotateY(90deg);
  transform-origin: left;
  color: #008080;
  background: #fff;
}

.button-group:hover .icon-cv {
  transform: rotateY(0deg);
}

.button-group {
  perspective: 200px;
  perspective-origin: calc(100% - 70px);
}
</style>
</head>
<body>
  <div class="container">
	<div class="button-group">
		<div class="text">Download CV</div>
		<div class="icon-cv"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></div>
	</div>
	
</div>
</body>
</html>

5. By Henrique Cansela

Made by Henrique Cansela. Download button with progress bar and checkmark on click. ( Source )

<!DOCTYPE html>
<html lang='en' class=''>
<head>
  <meta charset='UTF-8'>
  <title></title>
  <style class="INLINE_PEN_STYLESHEET_ID">
    body {
  display: flex;
  background-color: #333333;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.button {
  display: flex;
  text-align: center;
  justify-content: center;
}
.button__check {
  position: absolute;
  left: -100px;
}
.button__label {
  display: block;
  line-height: 60px;
  width: 196px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(to right, #0399e5 50%, #0277BD 50%);
  background-size: 200% 100%;
  background-position: -196px;
  color: #FFF;
  font-weight: bold;
  font-size: 21px;
  font-family: arial;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button__img {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0;
  filter: invert(100%);
}
.button__check:checked + .button__label {
  animation: label-pulse 0.5s, button 2s 1s ease-in, label 0.5s 2s;
  animation-fill-mode: forwards;
}
.button__check:checked + .button__label > .button__img {
  animation: img 0.5s 2.5s;
  animation-fill-mode: forwards;
}

@keyframes label-pulse {
  0% {
    font-size: 21px;
  }
  50% {
    background-color: #0399E5;
    font-size: 23px;
  }
  75% {
    font-size: 21px;
  }
}
@keyframes button {
  0% {
    font-size: 21px;
  }
  50% {
    background-position: 0;
  }
  100% {
    background-position: 0;
  }
}
@keyframes label {
  100% {
    color: #0399E5;
  }
}
@keyframes img {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
  </style>
</head>
<body>
  <div class="button">
  <input type="checkbox" class="button__check" id="checkbox"/>
    <label for="checkbox" class="button__label"><img src="http://imgh.us/1478651920_Checkmark.ico" class="button__img"></img>DOWNLOAD</label>
</div>
</body>
</html>

6. By Giang Gii

Made by Giang Gii. Download button with checkmark and animation of click. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@keyframes button-shadow {
  from {
    transform: rotate(0);
    bottom: -5px;
    right: -5px;
    opacity: 1;
  }
  to {
    transform: rotate(40deg);
    bottom: 50px;
    right: -60px;
    opacity: 0;
  }
}
@keyframes button-arrow-rotate {
  0% {
    width: 15px;
    margin: -25px auto 0;
  }
  1% {
    width: 10px;
    height: 0px;
    margin-top: 15px;
    transform: rotate(45deg);
  }
  100% {
    width: 10px;
    margin-top: 15px;
    transform: rotate(45deg);
    height: 35px;
  }
}
@keyframes button-arrow-down {
  from {
    bottom: -25px;
    opacity: 1;
  }
  to {
    bottom: -40px;
    opacity: 0;
  }
}
@keyframes button-arrow-up {
  0% {
    height: 20px;
    transform: rotateZ(45deg);
    right: -7px;
  }
  1% {
    right: 0px;
    height: 10px;
    width: 0;
    transform: rotateZ(0);
  }
  100% {
    right: 0px;
    height: 10px;
    width: 20px;
    transform: rotateZ(0);
  }
}
body {
  width: 90%;
  display: flex;
  background: #28df99;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

button {
  background-color: #fff;
  width: 140px;
  height: 70px;
  border: none;
  outline: none;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}
button .arrow {
  height: 25px;
  width: 15px;
  background-color: #99f3bd;
  border-radius: 2px;
  margin: -25px auto 0;
  position: relative;
}
button .arrow:after {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #99f3bd;
  border-radius: 2px;
  transform: rotateZ(45deg) translate(1px, 7px);
  bottom: 0;
  right: -7px;
  transition: all 0.5s;
  transition-delay: 0.5s;
}
button .arrow:before {
  content: "";
  background-color: #99f3bd;
  width: 25px;
  height: 10px;
  position: absolute;
  left: -5px;
  bottom: -25px;
  border-radius: 2px;
  transition: all 0.5s;
}
button:after, button:before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #99f3bd;
  height: 100%;
  width: 100%;
  bottom: -5px;
  right: -5px;
  border-radius: 5px;
}
button:after {
  animation-play-state: pause;
}
button:active {
  width: 180px;
  height: 90px;
}
button:focus:after {
  animation: button-shadow 1s;
}
button:focus .arrow {
  animation: button-arrow-rotate 0.5s forwards;
  animation-delay: 0.5s;
}
button:focus .arrow:after {
  animation: button-arrow-up 0.5s forwards;
  animation-delay: 0.5s;
}
button:focus .arrow:before {
  animation: button-arrow-down 0.5s forwards;
}
</style>
</head>
<body>
  <button class="btn-download" id="btn-auto-click">
   <div class="arrow"></div>
</button>
</body>
</html>

7. By Virlyz ID

Made by Virlyz ID. Simple Flat UI Download Buttons. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
a:link{text-decoration:none}
.vn-red a{
  background-color:#e74c3c;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-red a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-red a:hover{
  background:#2c3e50
}

.vn-green a{
background-color:#27ae60;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-green a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-green a:hover{
  background:#2c3e50
}

.vn-teal a{
background-color:#16a085;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-teal a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-teal a:hover{
  background:#2c3e50
}

.vn-orange a{
background-color:#f39c12;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-orange a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-orange a:hover{
  background:#2c3e50
}

.vn-blue a{
background-color:#2980b9;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-blue a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-blue a:hover{
  background:#2c3e50
}
</style>
</head>
<body>
  <div class="vn-red" style="text-align: center;">
<a href="#">DOWNLOAD</a>
</div>
<div class="vn-green" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>
<div class="vn-teal" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>
<div class="vn-orange" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>
<div class="vn-blue" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>
</body>
</html>

8. By Ana Tudor

Made by Ana Tudor. Pill Shaped Download Buttons using CSS & with custom properties. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(#fbfbfb, #e5e5e5);
}

button {
  display: block;
  position: relative;
  margin: 1rem;
  border: solid 0 transparent;
  border-width: 0.125em 0.25em 0.375em;
  width: 13em;
  height: 3em;
  border-radius: 1.5em;
  box-shadow: inset 0 -0.375em 1px var(--c-sh-0, #ff8c0c), 0 0.25em #9f9ea0;
  background: linear-gradient(var(--c-bg-0, #f9ea83), var(--c-bg-1, #ffa903)) padding-box, linear-gradient(#b4bab5, #e0e6dd) border-box;
  color: var(--c, #848483);
  font: 600 1em arial, sans-serif;
  text-align: left;
  text-indent: 1.25em;
  text-shadow: 1px 1px rgba(192, 192, 192, 0.5);
  text-transform: uppercase;
  cursor: pointer;
}
button:after {
  display: flex;
  align-items: center;
  position: absolute;
  top: -0.125em;
  right: -0.25em;
  bottom: -0.375em;
  padding: 0 1.25em 0.1875em 0.5em;
  border-radius: 0 3em 3em 0;
  box-shadow: inset 0 -0.1875em 1px var(--c-sh-1, #4f980d), 0 0.125em 1px var(--c-sh-2, #527235);
  background: linear-gradient(var(--c-bg-2, #cbe949), var(--c-bg-3, #9dc000) 50%, var(--c-bg-4, #7daf00) 0, var(--c-bg-5, #5a7f00));
  color: #fff;
  text-indent: 0;
  content: attr(data-xtra);
}
button:nth-child(2) {
  --c-sh-0: #265072;
  --c-sh-1: #ff7212;
  --c-sh-2: #754d36;
  --c-bg-0: #13d3f3;
  --c-bg-1: #2c64a9;
  --c-bg-2: #ffca59;
  --c-bg-3: #f7a307;
  --c-bg-4: #da7800;
  --c-bg-5: #b15d00;
  --c: #265072;
  font-size: 1.25em;
}
button:nth-child(3) {
  --c-sh-0: #4f0505;
  --c-sh-1: #858585;
  --c-sh-2: #040404;
  --c-bg-0: #d5412d;
  --c-bg-1: #ca0a0b;
  --c-bg-2: #999;
  --c-bg-3: #606060;
  --c-bg-4: #2f2d2d;
  --c-bg-5: #050505;
  --c: #540303;
  font-size: 1.5em;
}
</style>
</head>
<body>
  <button data-xtra='now'>Download</button>
<button data-xtra='now'>Download</button>
<button data-xtra='now'>Download</button>
</body>
</html>

9. By Vineeth.TR

Made by Vineeth.TR. Download button animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  background: #333;
}

button {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
  outline: none;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0% , 20% {
    line-height: 64px;
    width: 250px;
  }
  25%, 100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%, 100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0% , 20% {
    line-height: 64px;
    width: 250px;
  }
  25%, 100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%, 100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0% , 40% {
    height: 0;
  }
  90%, 100% {
    height: 100%;
  }
}
@keyframes load {
  0% , 40% {
    height: 0;
  }
  90%, 100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0% , 20% {
    right: 45px;
    top: 18px;
  }
  30% , 100% {
    right: 25px;
  }
  30%, 40%, 50%, 60%,70%,80% {
    top: 14px;
  }
  35%, 45%, 55%, 65%,75%,85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55% , 85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%, 100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0% , 20% {
    right: 45px;
    top: 18px;
  }
  30% , 100% {
    right: 25px;
  }
  30%, 40%, 50%, 60%,70%,80% {
    top: 14px;
  }
  35%, 45%, 55%, 65%,75%,85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55% , 85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%, 100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
</style>
</head>
<body>
  <button>Download</button>
</body>
</html>

10. By Neo Coder

Made by Neo Coder. CSS 3D Download Button. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
html, body {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: Impact;
    background: url('images/bg.gif') repeat 0 0;
    background-color: #222222;
}

* {
-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
   -moz-user-select: -moz-none;
    -ms-user-select: none;
	 -o-user-select: none;
        user-select: none;
	
	outline-style:none;/*IE*/
	-webkit-touch-callout: none;
}

.button {
	height: 80px;
	width: 180px;
	cursor: pointer;
	margin: 50px auto;
}
.button .outer {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 10px;
	background: rgba(50,50,50,0.75);
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-webkit-transform: perspective(500px) rotateX(35deg);
	-moz-transform: perspective(500px) rotateX(35deg);
}
.button .outer .height {
	position: relative;
	height: 100%;
	margin-top: -15px;
	padding-bottom: 15px;
	background: #39a02d;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
}       
.button:hover .outer .height {
	margin-top: -10px;
	padding-bottom: 10px;
	background: #3aaf2d;
	box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
	-webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
	-moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button:active .outer .height {
	margin-top: 0px;
	padding-bottom: 0px;
}
.button .outer .height .inner {
	line-height: 2.8em;
	font-size: 30px;
	letter-spacing: .05em;
	position: relative;
	height: 100%;
	text-align: center;
	text-shadow: #8aff7b 0px 0px 1px;
	background: #44d135;
	background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	-webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	-moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
}
.button:hover .outer .height .inner{
	text-shadow: #99f48d 0px 0px 1px;
	background: #43d034; /* Old browsers */
	background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}
.button:active .outer .height .inner{
	text-shadow: #319926 0px 1px 0px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	background: #1d7d12; /* Old browsers */
	background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */
}
</style>
</head>
<body>
  <div class="button"><div class="outer"><div class="height"><div class="inner">DOWNLOAD</div></div></div></div>
</body>
</html>

11. By zahra tahmasebi

Made by zahra tahmasebi. Download button with flip animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body,html{
	width: 100%;
	height: 100%;
}
body{
	background-color: #ccdfff;
}
div{
	margin: auto;
	text-align: center;
	width: 100%;
	height: 100%;
}
.btn{
  width:400px;
	background-color: #FFA200;
	color: #fff;
	font-family: tahoma;
  font-size:2em;
  border: 1px solid #FFA200;
	border-radius: 5px;
	margin:200px auto;
	padding: 20px;
	transition: all 0.5s ease;
}
.btn:hover{
	background-color: #fff;
	color: #FFA200;
	border: 1px solid #FFA200;
	cursor: pointer;
	transform: rotateY(360deg);
}
</style>
</head>
<body>
  <body>
	<div>
		<button class="btn">download</button>
	</div>
</body>
</html>

12. By Eric

Made by Eric. Animated Download Button. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import 'https://fonts.googleapis.com/css?family=Roboto|PT+Sans|Old+Standard+TT|Raleway';
* {
  box-sizing: border-box;
}

.link {
  width: 80px;
  height: 80px;
  display: block;
  margin: 100px auto;
}

.cta {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  position: relative;
}
.cta-ring {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 50%;
  background-color: #58C3F0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-text {
  color: white;
  font-size: 0.6em;
  text-align: center;
  line-height: 1.3em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.cta-text ~ div {
  display: block;
  text-align: center;
}

.fa-arrow-down {
  color: white;
  font-size: 2.5em;
  width: 50%;
  height: 50%;
  position: relative;
  top: 0;
  transition: all 0.3s ease-in;
}
.fa-arrow-down.arrow1 {
  margin-top: -60px;
  margin-bottom: 20px;
}
.fa-arrow-down:arrow2 {
  margin-top: 40px;
}

.cta:hover .cta-text {
  opacity: 1;
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-delay: 0.2s;
}
.cta:hover .arrow1 {
  margin-top: 200px;
  transition: all 0.5s ease-out;
}
</style>
</head>
<body>
  <a class="link" href="#" download="">
  <div class="cta cta-download">
    <div class="cta-ring">
      <div class="cta-text">
        <div>10mb</div>
        <div>download</div>
      </div>
      <i class="fa fa-arrow-down arrow1"></i>
      <i class="fa fa-arrow-down arrow2"></i>
    </div>
  </div>
</a>
</body>
</html>

13. By Zulhilmi Zainudin

Made by Zulhilmi Zainudin. Download Button CSS Transition. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style>
/* Primary */
*, *::after, *::before {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	font-family: sans-serif;
	color: #fff;
	background: #1F1F1F;
}

a {
	text-decoration: none;
}

/* Button and the icon */
section {
	width: 100%;
	height: 100vh;
	display: table;
}

.center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.trigger {
	position: relative;
	background: #4a1942;
	display: inline-block;
	width: 200px;
	height: 60px;
	border-radius: 50em;
	box-shadow: 0 2px 20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
	color: #fff;
}

span, em, i {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	/*background: yellow;
	opacity: .5;*/
}

em, i {
	transition: top 0.3s;
}

span {
	/*
	uncomment this to see where actually the
	Download and SVG located on initial state
	and on hover
	*/
	overflow: hidden;
}

em {
	line-height: 60px; /*make the button text vertically center of the button*/
	top: 0;
}

i {
	top: 100%; /*moving out the SVG to the bottom on page loads*/
  padding-top:20px;
}

i::before {
  content: "\f019";
  font-family: FontAwesome;
  font-size: 2rem;
}

.trigger:hover em {
	top: -100%; /* move the Download text to the top*/
}

.trigger:hover i {
	top: 0;
}

/*Tooltip*/
.trigger::before,
.trigger::after {
	position: absolute;
	opacity: 0; /*hide on page load*/
	visibility: hidden; /*to stop interaction when user hover on top of the button*/
	transition: all 0.3s;
}

.trigger::before {
	content: "File size: 50M";
	width: 140px;
	height: 60px;
	line-height: 60px; /*to make the text vertically center*/
	background: #4A1942;
	border-radius: 0.25em;
	bottom: 90px;
	left: calc(50% - 70px); /*take the left size of the box and pull it left by 70px (half of the box's width) referencing .trigger element as the base*/
}

/*the triangle below the `File size` box*/
.trigger::after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	/*
	each border side is 10px width
	this makes the square 20px width in total
	left to center = 10px
	center to right = 10px
	*/
	border-top-color: #4A1942;
	left: calc(50% - 10px); /*take the left size of the box and pull it left by 10px (half of the box's width) referencing .trigger element as the base*/
	bottom: 70px;
}

.trigger:hover::before,
.trigger:hover::after {
	opacity: 1;
	visibility: visible;
}

/*pull down effect for the `File size` box when we hover the button*/
.trigger:hover::before {
	bottom: 80px;
}

.trigger:hover::after {
	bottom: 60px;
}
</style>
</head>
<body>
  <section>
  <div class="center">
    <a class="trigger" href="#0">
      <span>
        <em>Download</em>
        <i aria-hidden="true"></i>
      </span>
    </a>
  </div>
</section>
</body>
</html>