Tạo Nút Download Hiệu Ứng Đẹp Cho Blogspot
Hello xin chào tất cả các bạn rảnh lại ra bài mới cho các bạn đây. Như các bạn đã biết nút Download cổ điển đã làm cho chúng ta nhàm chán và không có sự thuận mắt cho người tải. Chính vì vậy hôm nay mình sẽ hướng dẫn mọi người tạo nút Download nhiều màu, các bạn có thể xem demo ở dưới nhé.
Dưới đây là Demo và cách làm
Bước 1: Copy toàn bộ code dưới đây dán vào trên thẻ </head>
Source Code
<style type='text/css'>* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.buttons {
margin: 0%;
text-align: center;
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:focus {
outline: none;
}
.btn-hover.color-1 {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f); box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
</style>
Bước 2: Thêm html này vào bài viết trên blog, dưới dây là 11 button màu khác nhau
<div class="buttons"><button class="btn-hover color-1" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-2" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-3" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-4" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-5" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-6" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-7" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-8" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-9" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-10" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-11" onclick="window.open('#')">Download</button></div>Lời kết
Vậy là mình đã chia sẻ cho các bạn nút Download rất là màu mè và đẹp. Nếu các bạn có thắc mắc hay khiếu nại bản quyền thì hãy commnet xuông phía dưới cho mình biết nhé. Chúc các bạn có một ngày làm việc thật là hiệu quả.
Copyright Anh Đức Blog
Bài viết liên quan:
9 comments