Animated Download Button

by kompiajaib

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
  <div class="con_down">
      <i class="fa fa-download fa-2x"></i>
    <h4>Download now</h4>
  </div>
  <div class="con_sizes">
  <div class="sizes">
    <h5 class="size">34.5 MB</h5>
    <div class="sizes_abs"></div>
  </div>
  </div>
</div>

CSS

.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
    font-family:Arial;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
    height:50px;
    padding-right:10px;
    padding-top:5px;
    text-align:right;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down .fa-download{
    position:absolute;
    left:10px;
    top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
    padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  right:20px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-right-radius:5px;
  border-top-right-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  right:-20px;
  z-index:2;

}

.container:hover .sizes {
  right:-100px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
     border-bottom-right-radius:0;
  border-top-right-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}