Thứ Bảy, ngày 05 tháng 12 năm 2015

Share CODE nút download động bằng CSS3 Animated Đẹp


Hiệu Ứng CSS3 này xin chia sẻ cho các bạn làm trang download file cũng như upload tệp tin. À tiện thể bạn nào muốn thì ghé http://saoluu.net có thể upload sao lưu tệp tin miễn phí
Hiệu ứng này khi di chuyển vào nút download thì sẽ hiển thị thông tin của file luôn. Khá chuyên nghiệp. Thử ngay thôi !

Demo các bạn xem ở cuối bài viết



Share CODE nút download động bằng CSS3 Animated khá Đẹp

Các bạn có thể sử dụng một trong 2 nút hoặc cả 2 nút nếu thấy thích
HTML
<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
/** 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; }
}


DEMO trực tiếp cho các bạn tham khảo. Di chuyển chuột vào nút download click và cảm nhận