LỜI MỞ ĐẦU
Chào mừng tất cả các bạn đã đến với bài viết tiếp theo của mình! Hôm nay, mình xin giới thiệu với các bạn một mẫu Button hoàn toàn mới tuyệt đẹp mà mình vọc được bên codepen.io. Chúng ta bắt đầu nào =))
BƯỚC 1:
Chèn đoạn code Css Hover phía dưới trước thẻ đóng </body>
<style>
.buttons {
margin: 10%;
text-align: center;
}
.leanhduc-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;
}
.leanhduc-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;
}
.leanhduc-hover:focus {
outline: none;
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-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);
}
.leanhduc-hover.color-11 {
background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
.leanhduc-hover.color-12 {
background-image: linear-gradient(to right, #0099FF, #FF66FF, #009933, #FF6633);
box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
</style>
BƯỚC 2:
Chèn code phía dưới vào phần HTML khi viết bài (tùy ý các bạn)
<div class="buttons">
<button class="leanhduc-hover color-1" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-2" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-3" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-4" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-5" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-6" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-7" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-8" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-9" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-10" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-11" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
<button class="leanhduc-hover color-12" onclick="window.open('https://www.facebook.com/582762067')">Lê Anh Đức</button>
</div>
MỘT SỐ LƯU Ý KHI SỬ DỤNG:
- Trên đây mình để tất cả là 12 Button !
- Tha hồ lựa chọn khi sử dụng
- Cái nào không dùng thì xóa đi nhé !
LỜI KẾT
Như vậy là mình đã share cho các bạn một mẫu Button chuyển hướng tuyệt đẹp rồi nhé! Rất mong nó hữu ích với các bạn. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới! Chúc các bạn thành công =))
@Copyright Lê Anh Đức
