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>

Xem thêm: Ảnh bìa đẹp, Hình nền máy tính, ESPORT- THỂ THAO ĐIỆN TỬ, Thủ Thuật Android, Review mobile,Kinh doanh Marketing, Hình nền máy tính, Thủ thuật game, Truyện tranh hài hước,Công nghệ xe, Thiết bị thông minh, Tin nóng thế giới

Trả lời

Email của bạn sẽ không được hiển thị công khai.