Tạo nút download động bằng CSS3 Animated năm 2020

tạo nút download động css3 animated
 

Tạo nút download động bằng CSS3 Animated năm 2020

Tiếp tục mang đến cho các bạn một kiểu button động được làm từ CSS3, hôm nay mình sẽ chia sẻ 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 không hề thua kém với bài viết Animated Download Button Với CSS3 mà mình đã giới thiệu cho các bạn.

DemoDownload

 

CSS
Sau đó các bạn định dạng 2 button này với đoạn css sau :
/** 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}
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”></i></span>.zip<span class=”size”>11.5 MB</span></span></a></div>
</div>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *