Thứ Tư, ngày 04 tháng 5 năm 2016

Share Code Button (Nút) Download với Hiệu Ứng Động bằng CSS3 Đẹp

Với sự phát triển của CSS đã ra đời CSS3 với khả năng làm việc tốt hơn biểu diễn hiệu ứng tốt hơn đẹp hơn cũng như cấu trúc tương đối đơn giản không phải dùng javascript nhiều như trước. Hôm nay CODESEO.NET xin chia sẻ các hiệu ứng nút download động bằng CSS3 cực đẹp dưới đây cho các bạn đặt trong blog hoặc site download

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.




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 :
CODE
<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
CODE
@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;
width: 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):
CODE
.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 đỏ
CODE
.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 :
CODE
@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 !