Nếu bạn nghĩ hiệu ứng di chuột (hover effects) chỉ là những chi tiết nhỏ, hãy suy nghĩ lại. Khi được thực hiện đúng, chúng có thể cải thiện đáng kể trải nghiệm người dùng (UX). Chúng làm cho giao diện người dùng (UI) tương tác hơn. Chúng thể hiện kỹ năng frontend của bạn. Điều quan trọng là bạn không cần JavaScript để tạo ra các hoạt ảnh di chuột ấn tượng này. Trong hướng dẫn này, chúng tôi sẽ khám phá năm hiệu ứng hover chỉ dùng CSS. Các hiệu ứng này trông phức tạp nhưng đáng ngạc nhiên là rất đơn giản để triển khai.
Dù bạn đang thiết kế portfolio, landing page, hay thanh điều hướng, các hiệu ứng này sẽ thu hút người dùng. Chúng cũng giữ cho codebase của bạn sạch sẽ.
Trước Khi Bắt Đầu: Mẹo CSS Nhanh
Trước khi đi sâu vào các hiệu ứng, hãy đảm bảo bạn đã quen thuộc với các khái niệm sau:
:hoverpseudo-class.- Các thuộc tính
transition,transform, vàanimation. - Cấu trúc HTML cơ bản.
Hầu hết các hiệu ứng này được xây dựng bằng cách sử dụng flexbox, positioning, và pseudo-elements như ::before và ::after.
1. Hiệu Ứng Hover Nút Phát Sáng (Glowing Button Hover Effect)
Hiệu ứng nút bắt mắt này thêm một đường viền phát sáng. Đường viền này được tạo hoạt ảnh khi di chuột. Nó hoàn hảo cho các Kêu gọi Hành động (CTA) quan trọng.
HTML
<a href="#" class="glow-button">Hover Me</a>
CSS
.glow-button {
position: relative;
padding: 15px 30px;
color: white;
text-decoration: none;
background: #111;
border: 2px solid transparent;
border-radius: 5px;
transition: 0.3s ease-in-out;
overflow: hidden;
}
.glow-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
animation: rotate 4s linear infinite;
z-index: 0;
opacity: 0;
transition: 0.3s;
}
.glow-button:hover::before {
opacity: 1;
}
.glow-button:hover {
border: 2px solid white;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}2. Nâng Thẻ với Bóng Đổ (Card Lift with Shadow)
Hiệu ứng này rất tốt cho danh sách sản phẩm hoặc thẻ blog. Việc di chuột sẽ nâng thẻ lên và thêm một bóng đổ mềm mại.
HTML
<div class="card">
<h3>Card Title</h3>
<p>Some description text.</p>
</div>CSS
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}Hiệu ứng này tạo cảm giác phản hồi nhanh. Nó ngay lập tức thêm chiều sâu cho giao diện người dùng của bạn.
3. Phóng To Ảnh + Chữ Hiện Dần Khi Di Chuột (Image Zoom + Text Fade on Hover)
Hiệu ứng này là lý tưởng cho các thư viện ảnh hoặc các dự án portfolio.
HTML
<div class="img-hover-box">
<img src="your-image.jpg" alt="Sample Image" />
<div class="overlay">View Project</div>
</div>CSS
.img-hover-box {
position: relative;
width: 300px;
overflow: hidden;
}
.img-hover-box img {
width: 100%;
transition: transform 0.5s ease;
}
.img-hover-box .overlay {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.7);
color: white;
width: 100%;
text-align: center;
padding: 20px;
opacity: 0;
transition: opacity 0.5s ease;
}
.img-hover-box:hover img {
transform: scale(1.1);
}
.img-hover-box:hover .overlay {
opacity: 1;
}4. Hiệu Ứng Gạch Chân Trượt Cho Liên Kết (Underline Swipe Effect for Links)
Đây là một hiệu ứng hover liên kết hiện đại và tối giản. Nó tạo cảm giác mượt mà và tương tác.
HTML
<a href="#" class="underline-hover">Read More</a>
CSS
.underline-hover {
position: relative;
text-decoration: none;
color: black;
font-weight: 500;
}
.underline-hover::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #ff4e50;
transition: width 0.3s ease;
}
.underline-hover:hover::after {
width: 100%;
}Hiệu ứng này giữ cho thiết kế của bạn sạch sẽ. Đồng thời nó đưa ra một gợi ý tương tác tinh tế.
5. Hiệu Ứng Lật Thẻ (Flip Card Hover Effect)
Bạn muốn hiển thị chi tiết ở mặt sau của một thẻ? Hiệu ứng hover này sẽ lật thẻ để lộ thêm nội dung.
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">Front</div>
<div class="back">Back Info</div>
</div>
</div>CSS
.flip-container {
perspective: 1000px;
width: 200px;
height: 150px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
}
.front {
background: #2196f3;
}
.back {
background: #f44336;
transform: rotateY(180deg);
}Hiệu ứng 3D này trông cao cấp. Nó hoàn toàn dựa vào các chuyển đổi CSS và phối cảnh.
Mẹo Bổ Sung cho Hiệu Ứng Hover
- Luôn kiểm tra trên thiết bị di động: Màn hình cảm ứng không có chức năng “hover”. Đảm bảo trải nghiệm người dùng (UX) của bạn vẫn có ý nghĩa.
- Giữ tốc độ nhanh: Sử dụng
transformvàopacity. Điều này giúp hoạt ảnh mượt mà hơn và được tăng tốc bằng GPU. - Không lạm dụng: Sử dụng hiệu ứng hover một cách tiết kiệm. Điều này giúp chúng duy trì tác động mạnh mẽ và không gây mất tập trung.
Kết Luận
Năm hiệu ứng hover này chứng minh rằng CSS là đủ mạnh mẽ. Nó có thể tạo ra các trải nghiệm web phong phú và tương tác.
Dù bạn đang cải thiện UI hay thể hiện kỹ năng trong portfolio, những thủ thuật này đảm bảo thu hút sự chú ý. Chúng không làm phình to codebase của bạn.
Phần tốt nhất là: Không cần JavaScript. Không cần thư viện ngoài. Chỉ cần CSS sạch sẽ và hiệu suất cao.
Hãy thử thêm một trong những hiệu ứng này vào dự án tiếp theo của bạn. Hãy xem giao diện của bạn trở nên sống động!
Tham khảo: medium.com
Bài viết liên quan: