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

5 Share Share Send by Email Copy URL