Trong ngữ cảnh của thiết kế giao diện người dùng (UI), "button hover" đề cập đến trạng thái của một button khi con trỏ chuột được di chuyển lên trên nó. Khi người dùng di chuột qua một button, thông thường có một số hiệu ứng được áp dụng để tạo sự tương tác và phản hồi hấp dẫn.
 |
| Tạo button có hiệu ứng theo con trỏ chuột đẹp. |
Một số hiệu ứng phổ biến khi button được hover
- Thay đổi màu sắc: Button có thể thay đổi màu nền, màu chữ hoặc cả hai khi con trỏ chuột đi qua.
- Hiệu ứng chuyển động: Button có thể có hiệu ứng chuyển động như phóng to, thu nhỏ, di chuyển hoặc xoay một phần của nó khi được hover.
- Hiển thị tooltip: Một tooltip có thể xuất hiện khi con trỏ chuột đi qua button, hiển thị một văn bản nhỏ hoặc thông tin bổ sung.
- Hiệu ứng đổ bóng: Button có thể có hiệu ứng đổ bóng hoặc nổi lên để tạo sự thay đổi thị giác khi được hover.
Những hiệu ứng này giúp làm nổi bật và tạo sự tương tác cho button, hướng dẫn người dùng về tính tương tác của nó và làm nổi bật các phản hồi hợp lý trong giao diện người dùng.
Trong bài viết này mình sẽ hướng dẫn các bạn làm 1 button hover đep theo demo dưới đây nhé:
Các bước thực hiện
Bước 1: Đăng nhập blogger.com > Chủ đề > Chỉnh sửa HTML
Bước 2: Dán toàn bộ đoạn code dưới đây trên thẻ đóng </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 tempalte 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 Chế độ xem HTML (bên trên "Chế độ xem Soạn thư") và dán đoạn code này vào chỗ cần hiển thị button trong bài viết:
<div class="demo_button">
<a href="#">demo</a>
<div class="demo_fill"/>
</div>
Demo như hình dưới nha:
 |
| Chọn Chế độ xem HTML rồi dán code hiển thị vào. |
Ok và cuối cùng khi xuất bản bài viết mới bạn sẽ có một button hover mới vô cùng xịn xò.
Lời kết
Ở bài viết trên, chúng ta sử dụng CSS và Jquery để tạo ra hiệu ứng trỏ chuột cho button. Khi trỏ chuột vào button, sẽ có một lớp màu trắng di chuyển theo hướng chuột, tạo ra hiệu ứng đẹp.
Bạn có thể tùy chỉnh CSS để thay đổi màu sắc, kích thước và các thuộc tính khác của button để phù hợp với thiết kế của bạn.
