Tạo Button Chuyển Hướng Với Css Hover Tuyệt Đẹp Cho Blogspot

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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

2 nhận xét:


Cùng tham gia bình luận bài viết này nhé!