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

Anh Trai Nắng
0
Code tạo hover 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 cho blogspot.

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

(getButton) #text=(Xem Demo) #icon=(link)

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:

Tạo button có hiệu ứng theo con trỏ chuột đẹp
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.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu