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

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)
<a href="https://www.leanhduc.pro.vn/" target="blank" title="Lê Anh Đức | Website Chia Sẻ Thủ Thuật - Kiến Thức Tổng Hợp">
<div id="testbutton">
</div>
</a>

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
Nếu thấy bài viết hay và có ích thì đừng quên để lại cho mình một Tim & Share nhá. Cảm ơn các bạn rất nhiều !!!
CÓ THỂ BẠN ĐANG TÌM KIẾM