Tạo button có hiệu ứng theo trỏ chuột đẹp

Phú Cường Blogger chào tất cả các bạn. Vài hôm nay mình bận quá nên cũng chưa ra thêm được bài thủ thuật nào mới cả nên hôm nay nhân cái ngày trời mưa to quá, mình ngồi nhà và chia sẻ cho các bạn 1 thủ thuật nho nhỏ bằng CSS và Jquery để làm cho button (nút bấm) trong blog có hiệu ứng đẹp hơn khi ta rê chuột tại button đó nhé.

Nice hover effect for button

Tạo button có hiệu ứng theo trỏ chuột đẹp
Tạo button có hiệu ứng theo trỏ chuột đẹp


Các bước thực hiện

Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán toàn bộ đoạn code dưới đây trước thẻ
</body>
<b:if cond='data:blog.pageType == "item"'>
<style>
.demo_button {
  border: 2px solid #337ab7;
  font-family: sans-serif;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  border-radius: 50px;
  overflow: hidden;
  z-index: 9999;
  position: relative;
  display: inline-block;
}
.demo_button a {
  text-decoration: none;
  color: #337ab7!important;
  display: inline-block;
  padding: 9px 29px;
  text-transform: uppercase;
  font-size:16px;
  transition: color 0.3s ease;
}
.demo_fill {
  height: 0px;
  width: 0px;
  background: rgba(51, 122, 183, 0.4)!important;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}
.demo_button a:hover {
  color:#ffffff!important;
}
</style>
<script>
$(document).ready(function(){
  offset = $(".demo_button").offset();
  $(".demo_button").on("mouseenter",function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
    realMouseX = mouseX - offset.left;
    realMouseY = mouseY - offset.top;
    $(".demo_fill").css({left:realMouseX,top:realMouseY});
    $(".demo_fill").animate({height:'400px',width:'400px'},400);
  });
  $(".demo_button").on("mouseleave",function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
    realMouseX = mouseX - offset.left;
    realMouseY = mouseY - offset.top;
    $(".demo_fill").animate({height:'0px',width:'0px',left:realMouseX,top:realMouseY},300);
  });
});

</script>
</b:if>
Bước 3: Lưu template lại.

Cách sử dụng

Để sử dụng button có hiệu ứng này, bạn cứ soạn bài viết bình thường. Sau đó, bạn chuyển qua tab HTML (cạnh tab Viết) và dán đoạn code này vào chỗ cần hiển thị button trong bài viết nhé.
<div class="demo_button">
    <a href="#">demo</a>
    <div class="demo_fill"/>
  </div>
Chuyển sang tab HTML (khung đỏ) và dán code button tại chỗ bạn muốn (khung xanh)

Lời kết và ứng dụng

Vậy là mình vừa chia sẻ xong cho các bạn 1 hiệu ứng hover vào button mới khá đẹp. Ngoài ra, đoạn jquery cũng không dài và thường ta chỉ dùng button này làm button demo hay download trong bài viết thôi nên nó cũng không gây lag gì cho blog đâu. Chúc các bạn thành công và đón đợi bài tiếp theo bên blog mình nhé.

DMCA.com Protection Status

Blog mình đã bỏ hệ thống bình luận Blogspot và thay thế bằng bình luận Facebook từ ngày 11/07/2018 nên hơn 3k bình luận trước đó sẽ không còn hiển thị nữa. Nếu bạn không nhận được phản hồi về thắc mắc của bạn trong mỗi bài viết thì liên hệ trực tiếp với mình qua PCB Fanpage.