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

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

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ư...
08 tháng 11

  • 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>
    Created by Star Tuấn IT
    DMCA.com Protection Status