Enter your keyword

Menu

Recent

[Tip] Hướng dẫn tạo button download bằng HTML5 và CSS3

Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web. Một số trình duyệt – như các phiên bản hiện hành của Safari và Chrome – đã thực hiện một số tính năng từ các phiên bản dự thảo của chúng.
HTML5 và CSS3 – được kết hợp với các công nghệ Web khác như JavaScript – có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang web nếu được sử dụng đúng.

Như tiêu đề bài viết, hôm nay mình sẽ hướng dẫn ae tạo nút button download bằng HTML5 và CSS3 để làm cho giao diện trang web trở thân thiện, dễ nhìn hơn.

Đầu tiên, trong file .html ta đặt thẻ button ở chỗ mà mình mong muốn trên bài đăng
<button id="button1"> <a href="#trang" style=" text-decoration: none;" >Download</a> </button>
tiếp theo trong file .css ( hay trên thẻ ]]></b:skin> đối với làm blog) ta thêm phần style
#button1{

font-size: 22px;
width: 250px;
height: 70px;
position: absolute;
margin: auto;
border: 3px solid deepskyblue;
color: deepskyblue;
overflow: hidden;
border-radius: 70px;
animation: resize 6s infinite;

}
#button1:hover{
background-color: #66FFCC;
}
#button1:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: deepskyblue;
animation: fills 6s infinite;

}
#button1:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
right: 26px;
top: 18px;

border-bottom: 3px solid deepskyblue;
border-right: 3px solid deepskyblue;
box-shadow: 3px 3px #CCFFFF, 6px 6px deepskyblue;
transform: rotate(45deg);
animation: jum 6s infinite;

}
@keyframes fills {
0%, 40%{height: 0;}
90%,100%{height: 100%;}

}
@keyframes resize {
0%,20% {width: 250px;}
30%, 100% {line-height: 150px; border-color: deepskyblue;}
35%,100% {width: 70px; border-color: #33FF33;}

}
@keyframes jum {
0%,20% {right: 26px; top: 18px;}
30%,40%,50%,60%,70%,80%{top: 14px;}
35%,45%,55%,65%,75%,85%{top: 22px;}
54%{box-shadow: 3px 3px #CCFFFF, 6px 6px deepskyblue; border-color: deepskyblue; }
55%,85%{ border-color: #CCFFFF; box-shadow: 3px 3px deepskyblue, 6px 6px #CCFFFF;   border-width: 3px; height: 15px;}
90%,100%{box-shadow: 1px 1px #CCFFFF ; border-width: 5px; height: 25px; border-color: white;}


}

Ấn lưu và xem thành quả:
[Tip] Hướng dẫn tạo button download bằng HTML5 và CSS3 [Tip] Hướng dẫn tạo button download bằng HTML5 và CSS3 Reviewed by Duy Nguyễn on 7/27/2017 Rating: 5

Không có nhận xét nào: