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 |
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é.
