XEM NGAY

Bài viết mới

Tạo nút download bằng css3

Đoàn Long | 15 April, 2015 - 1390 Lượt xem

Doanduylong.com – Tạo nút download bằng css3. Thay vào những dòng link Download bằng cách ẩn link vào nút bấm Download động,  tạo cho website của bạn thêm sinh động hoàn hảo.

Tạo nút download bằng css3

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; }
}

Link download Server Fshare: TẢI VỀ

Link download Server TenLua: TẢI VỀ

Chúc bạn thành công!

Mọi thắc mắc, góp ý bạn có thể comment dưới bài viết.

DOANDUYLONG.COM

 

Bình luận trên Facebook