Tạo Button chuyển hướng đẹp mắt cho Blogspot


Hôm nay bọn mình sẽ share cho các bạn 1 cái cái button có hiệu ứng khá đẹp mắt
Các bạn có thể xem demo ở đây


HoangLam cảm ơn Lê Anh Đức đã "tài trợ" cho bài đăng này!

Để tạo được một Button như trên, các bạn làm theo các bước dưới đây nhé

Bước 1

Tại giao diện chính của Blogger, chúng ta sẽ đi từ Chủ đề >> Tùy chỉnh >> Chỉnh sửa HTML

Bước 2

Các bạn copy đoạn CSS dưới đây và dán vào trên thẻ </body> hoặc dưới <body> của blog nhó
<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 3

Để sử dụng được button này khi viết bài chúng ta sẽ chuyển chế độ soạn thành chế độ Html và chèn code vào vị trí mà chúng ta muốn nó hiển thị trên bài đăng.
Copy đoạn code này và sửa lại các thông tin của bạn nhé
<a href="https://HoangLamvn.blogspot.com" target="blank" title="HoangLam - Support Nghệ An">
<div id="testbutton">
</div>
</a>
Trong đó:
  • Thay href = "https://HoangLamvn/blogspot.com" bằng domain của bạn
  • Thay HoangLam - Support Nghệ An bằng tiêu đề trích dẫn của bạn
Trên đây là bài hướng dẫn tạo Button chuyển hướng đẹp mắt cho Blogspot được thực hiện bởi HoangLam. Nếu có thắc mắc hay ý kiến đóng góp gì thì các bạn hãy để lại comment bên dưới dể chúng mình được biết nhé.