Tạo nút download với hiệu ứng động bằng CSS3

Hôm trước mình đã giới thiệu tới các bạn bài viết Từng bước tạo nút bấm động với CSS3 , và nối tiếp những phần cơ bản về hiệu ứng động trong CSS3 . Mình sẽ tiếp tục chia sẻ với các bạn cách tạo nút bấm động với hiệu ứng cũng cực cool , và lần này là dùng cho nút download, vốn dĩ được sử dụng rất nhiều trên các trang web. Và sau bài viết này, các bạn cũng có thể áp dụng ngay cho website hay blog của mình.

Xem Demo | Download

Trong bài viết này, chúng ta sẽ sử dụng font để tạo các icon , các bạn có thể download toàn bộ font sử dụng trong bài viết này ở mục download.

HTML

Chúng ta cần khung html chuẩn như sau :

<a href="#" class="a-btn">
    <span class="a-btn-symbol">Z</span>
    <span class="a-btn-text">Download Now</span>
    <span class="a-btn-slide-text">Windows Vista / Windows 7</span>
    <span class="a-btn-slide-icon"></span>
</a>

CSS

Chúng ta sẽ định dạng css cho nut bấm cơ bản, và tạo các icon từ font

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.a-btn{
    border-radius: 50px;
    padding: 10px 30px 10px 70px;
    position: relative;
    float:left;
    display: block;
    overflow: hidden;
    margin: 10px;
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%);
    box-shadow:
        0px 0px 7px rgba(0,0,0,0.2),
        0px 0px 0px 1px rgba(188,188,188,0.1);
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn-symbol{
    font-family: 'WebSymbolsRegular', cursive;
    color: #555;
    font-size: 20px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    position:absolute;
    left: 20px;
    line-height: 32px;
    transition: opacity 0.3s ease-in-out;
}
.a-btn-text{
    font-size: 20px;
    color: #d7565b;
    line-height: 16px;
    font-weight: bold;
    font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    display: block;
}
.a-btn-slide-text{
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
.a-btn-slide-icon{
    position:absolute;
    top:-30px;
    awidth: 22px;
    height: 22px;
    background: transparent url(../images/arrow_down_black.png) no-repeat top left;
    left:20px;
    opacity: 0.4;
}

Và đây là hiệu ứng khi chúng ta rê chuột vào nút bấm (hover):

.a-btn:hover{
    background: #fff;
    box-shadow:
        0px 0px 9px rgba(0,0,0,0.4),
        0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:hover .a-btn-symbol{
    opacity: 0;
}
.a-btn:hover .a-btn-slide-icon{
    -webkit-animation: slideDown 0.9s linear infinite;
}

Khi chúng ta nhấn vào nút, thì nút bấm sẽ chuyển sang màu đỏ

.a-btn:active{
    background: #d7565b;
    box-shadow:
        0px 2px 2px rgba(0,0,0,0.6) inset,
        0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:active .a-btn-text{
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.a-btn:active .a-btn-slide-text{
    color: rgba(0,0,0,0.4);
    text-shadow: none;
}

Và cuối cùng, chúng ta tạo hiệu ứng động di chuyển mũi tên từ trên xuống như sau :

@keyframes slideDown {
    0% { top: -30px; }
    100% { top: 80px;}
}

Thế là xong rồi đó các bạn, có một điều cần chú ý là để hiệu ứng có thể chạy tốt trên các trình duyệt , thì các bạn nên khai báo thêm tiền tốt -webkit (cho Chrome và Safari ) và -moz ( Cho phiên bản firefox cũ ).

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

Chuyên Mục: Css

Bài viết được đăng bởi webmaster