Tạo Nút Chuyển Hướng Cho Blogspot | Gradient Color Button With Hover Glow

- 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

DEMO VÀ HƯỚNG DẪN


BƯỚC 1:

Chèn đoạn code Css Hover phía dưới trước thẻ đóng </body>
<style>
#testbutton {
width: 150px;
height:50px;
border-radius:180px;
position:relative;
left:calc(50% - 75px);
top:calc(50% - 25px);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
cursor:pointer;
line-height:12px;
}

#testbutton:before {
content:'';
z-index:1;
position:absolute;
display:block;
width:80%;
height:70%;
top:15%;
left:10%;
transition: 0.3s opacity ease-in-out;
filter:blur(15px);
opacity:0;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}

#testbutton:hover:before {
opacity:1;
transition: 0.3s opacity ease-in-out;
filter:blur(25px);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}

#testbutton:after {
content:'CLICK ME!';
text-align:center;
line-height:40px;
font-size:18px;
color:rgba(235,235,235,1);
font-family:'Verdana';
font-weight:bold;
z-index:5;
position:absolute;
display:block;
border-radius:180px;
width:92%;
height:80%;
top:10%;
left:4%;
background-color:rgb(19, 20, 22);
}
</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 id="testbutton" onclick="window.open('https://www.facebook.com/582762067')" title="Lê Anh Đức | Website Chia Sẻ Thủ Thuật - Kiến Thức Tổng Hợp">
</div>

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

5 nhận xét:


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