Tạo Button Download bằng CSS3 Animated

Chào mừng các bạn đến với chuyên mục Vọc Code trên iZdesigner. Hôm nay chúng tôi sẽ mang đến cho các bạn một kiểu button động được làm từ CSS3. Sản phẩm này cho các bạn thêm một nút bấm cho phép người dùng tải file trên trang web của bạn với hiệu ứng tuyệt đẹp và dễ sử dụng.

HTML
Sau đây là 2 khung chuẩn html cho 2 mẫu button.

<div class="center"><a href="javascript:void(0)" class="dlbtn">Download<span class="details">.zip<span class="size">11.5 MB</span></span></a></div>

    <br><br>

    <div class="centerbig"><a href="javascript:void(0)" class="dlbtn big">Download<span class="details"><span class="dlicon"><i class="entypo">&#59256;</i></span>.zip<span class="size">11.5 MB</span></span></a></div>
  </div>

CSS
Sau đó các bạn định dạng

/** download button effect **/
a.dlbtn {
  display: inline-block;
  position: relative;
  height: 45px;
  line-height: 40px;
  overflow: hidden;
  padding: 0 30px;
  font-size: 12px;
  font-weight: bold;
  color: #c0c0c0;
  background-color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #ddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

a.dlbtn:hover, a.dlbtn:focus {
  color: #fff;
  padding-right: 90px;
  background-color: #5381bf;
  border-color: #5381bf;
}

a.dlbtn .details {
  position: absolute;
  line-height: 11px;
  top: 4px;
  right: -15px;
  opacity: 0;
  background: #49668c;
  color: #fff;
  text-align: center;
  padding: 3px 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: right 0.4s linear, opacity 0.25s;
  -moz-transition: right 0.4s linear, opacity 0.25s;
  transition: right 0.4s linear, opacity 0.25s;
}
a.dlbtn .details .size {
  display: block;
  padding-top: 3px;
}

a.dlbtn:hover .details, a.dlbtn:focus .details {
  right: 8px;
  opacity: 1;
}

/** large download button **/
a.dlbtn.big {
  height: 115px;
  line-height: 115px;
  padding: 0 80px;
  font-size: 26px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
a.dlbtn.big:hover, a.dlbtn.big:focus {
  padding-right: 160px;
}

a.dlbtn.big .details {
  top: 10px;
  font-size: 18px;
  line-height: 20px;
  padding: 6px 15px;
}

a.dlbtn.big:hover .details, a.dlbtn.big:focus .details {
  right: 15px;
}

a.dlbtn .dlicon {
  display: block;
  font-size: 55px;
  line-height: 30px;
}

/** responsive styles **/
@media screen and (max-width: 620px) {
  h1 { font-size: 2.7em; }
  .center { width: 30%; }
  .centerbig { width: 70%; }
}

@media screen and (max-width: 480px) {
  h1 { font-size: 2.2em; }
  .center { margin-left: 0; }
  .centerbig { margin-left: -20px; }

  a.dlbtn.big { padding: 0 70px; }
  a.dlbtn.big:hover, a.dlbtn.big:focus { padding-right: 150px; }
}

Thế là xong, từ giờ là các bạn đã có thêm một mẫu button để áp dụng vào trong trang web hay blog của các bạn.