Xu hướng người dùng hiện nay là tương tác hai chiều. Nghĩa là website phải có “phản hồi” với hành động của họ. Vì vậy, hầu hết các website hiện nay đều có các hiệu ứng bắt mắt. Và CSS Hover cũng là một trong số đó. Việc bổ sung các tính năng này cho website sẽ giúp doanh nghiệp cải thiện tỷ lệ nhấp chuột, giữ chân họ trên website lâu hơn và đặc biệt là dễ thúc đẩy họ “hành động” hơn.
Nếu bạn cũng muốn thu hút khách hàng tiềm năng và mang lại họ những trải nghiệm tốt nhất thì xem ngay 5 hiệu ứng CSS hover này nhé!
Bạn đang xem: Sử dụng 5 hiệu ứng CSS hover này để tăng trải nghiệm người dùng
Hiệu ứng CSS Hover là gì?
CSS Hover là hiệu ứng mà khi người dùng di chuột qua một phần tử nào đó thì nó xuất hiện sự thay đổi về màu sắc, văn bản hoặc các hiệu ứng động khác. Những hiệu ứng này được thêm vào một trang web để nâng cao tính tương tác và làm cho nó dễ điều hướng hơn.
Hiệu ứng di chuột CSS có thể xuất hiện dưới dạng hiệu ứng chuyển tiếp (Transitions) hoặc hoạt ảnh (Animations)
Transitions
Những hiệu ứng transitions cho phép bạn thay đổi giao diện hoặc hành vi của một thành phần trên trang web. Tuy nhiên, phải có yếu tố tác động, chẳng hạn như người dùng di chuột qua một yếu tố cụ thể. Các transitions chuyển từ trạng thái ban đầu sang trạng thái được thiết lập sau khi trigger. Quá trình chuyển đổi chỉ được thực hiện một lần và không cho phép bạn chỉ định các điểm trung gian (intermediate points).
Animations
Các hiệu ứng này có các keyframe, cho phép chúng thực hiện các tính năng như repeat backward, loop (lặp lại theo chiều ngược lại hoặc lặp lại vô hạn lần). Hiệu ứng này cũng có một trạng thái trung gian. Keyframe sẽ cho biết các phần tử được hiển thị động tại thời điểm cụ thể trong animation sequence.
Các loại hiệu ứng CSS Hover
Hiệu ứng CSS Hover có thể được áp dụng cho văn bản, hình ảnh, video, liên kết hoặc nút. Sau đây là một số ứng dụng chính:
Text hover
Những hiệu ứng như vậy phù hợp khi bạn muốn xây dựng một trang web tối giản. Thiết kế nên đơn giản nhưng vẫn thể hiện được thông điệp. Nó có thể có các dạng sau:
- Hiệu ứng văn bản trên terminal: Giả lập việc gõ phím trên một trình xử lý văn bản. Các từ sẽ xuất hiện nhấp nháy, nhưng tốc độ phải đủ chậm để cho phép người dùng đọc được.
- Hiệu ứng văn bản: Văn bản trong hiệu ứng này có thể xuất hiện lên, xuống hoặc sang ngang.
Link hover
Link hover là cách để làm nổi bật hyperlink trong trang web. Khi di chuột vào các đoạn text có chứa hyperlink, chúng sẽ được làm nổi bật lên. Link hover có thể ở các dạng sau:
Link hover
- Thay đổi màu liên kết: Màu của liên kết từ màu xanh lam sang màu đỏ.
- Thay đổi màu nền: Hiệu ứng này làm thay đổi màu nền của liên kết.
- Text swapping: Hiệu ứng này làm thay đổi nội dung của biểu tượng liên kết.
Button hover
Các button rất quan trọng trong các trang web vì chúng cho phép gửi biểu mẫu và truy cập vào các phần khác nhau của trang web. Hiệu ứng Button hover có thể được thực hiện dưới dạng:
- Thay đổi màu văn bản: Màu của văn bản trên nút có nội dung “Click Me” có thể thay đổi từ Đỏ sang Xanh lục khi di chuột.
- Thay đổi màu nền: Các nút HTML mặc định trong suốt., có thể thêm màu nền cho các nút như vậy. Khi di chuột, màu nền có thể thay đổi sang màu khác.
- Hiệu ứng Bounce: Thu hút người dùng bằng cách thiết kế nút để Bounce khi di chuột.
Image hover effects
- Swap: Bạn có thể tạo một carousel hình ảnh khi di chuột.
- Fade in/out: Hiệu ứng này làm cho hình ảnh rõ hơn khi bạn di chuột qua chúng.
- Text swap: Hiệu ứng làm hiển thị thông tin trên hình khi người dùng di chuột qua hình ảnh
Các hiệu ứng CSS hover phổ biến
Đổi màu background
Hiệu ứng này có thể được áp dụng cho các button, link hoặc văn bản được hiển thị trên trang web. Khi con trỏ chuột của bạn chạm vào mục tiêu, màu nền sẽ thay đổi.
Ví dụ:
Tệp HTML
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <div> Hover and see me change!!!!! </div </body> </html>
Tệp CSS
div:hover { background-color: rgb(255, 0, 0); width: 18rem; align-items: center; text-align: center; }
Trước và sau khi thiết lập hiệu ứng CSS Hover
Trước khi di chuyển chuột
Sau khi di chuyển chuột
Đổi màu link
Xem thêm : Cách bẻ khóa mật khẩu Wifi trên iPhone và Android
Liên kết là yếu tố quan trọng trên một trang web vì chúng giúp chúng ta di chuyển từ trang này sang trang khác. Sử dụng thẻ HTML <a> để tạo hyperlink. Thay đổi màu liên kết khi di chuột để làm tăng khả năng hiển thị của liên kết.
Ví dụ:
Tệp HTML
<meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <div> <a href=”#”>Hover over me and see the magic</a> </div
CSS file
a:link { color: rgb(0, 255, 34); } a:hover { color: #ff8400; }
Trước và sau khi di chuột
Trước khi di chuyển chuột
Sau khi di chuyển chuột
Sliding Highlight
Khi người dùng di chuột, hiệu ứng này sẽ thêm một box shadow cho liên kết trong đoạn văn. Khi đó, màu của liên kết sẽ thay đổi.
Ví dụ
Tệp HTML
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <a href=”#”>Geekflare</a> <link rel=”stylesheet” href=”style.css”> </head> <body> </body> </html>
Tệp CSS
a { box-shadow: inset 0 0 0 0 rgb(255, 21, 0); color: #ff4000; padding: 0 .25rem; margin: 0 -.25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; } a:hover { color: #fff; box-shadow: inset 200px 0 0 0 #ff4000;; } a { color: #ff4000; font-family: ‘Poppins’, sans-serif; font-size: 27px; font-weight: 700; line-height: 1.5; text-decoration: none; } body { display: grid; }
Trước và sau khi di chuột
Trước khi di chuyển chuột với hiệu ứng Sliding Highlight
Sau khi di chuyển chuột với hiệu ứng Sliding Highlight
Rainbow Underline
Rainbow Underline là hiệu ứng thêm một gạch dưới nhiều màu vào văn bản khi di chuột.
HTML file
Xem thêm : 1 Phút sửa ngay lỗi tài khoản MobiFone bị chặn
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <div> <p>This is <a href=”#”>Rainbow</a> hover effect. </p> </div </body> </html>
CSS file
p { max-width: 800px; margin: auto 15%; line-height: 1.1; font-size: 78px; font-weight: 700; letter-spacing: .0125em; color: black; } a { display: inline-block; position: relative; text-decoration: none; color: inherit; z-index: 1; } a::after { content: ”; position: absolute; left: 0; bottom: .07em; height: .1em; width: 100%; background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959); z-index: -1; transition: height .25s cubic-bezier(.6,0,.4,1); } a:hover::after { height: .2em; } p { font-size: 58px; }
Trước và sau khi di chuột
Trước khi di chuột với hiệu ứng Rainbow Underline
Sau khi di chuột với hiệu ứng Rainbow Underline
Text Swapping
Text Swapping là hiệu ứng văn bản thay đổi khi được người dùng di chuột vào. Trường hợp sử dụng phổ biến nhất cho hiệu ứng này là một button có chữ “Comment”, sau khi di chuyển vào, nó sẽ được đổi thành “Add comment”.
Ví dụ
HTML file
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <button><span>99 comments</span></button> </body> </html>
CSS file
button { width: 10em } button { height: 3em } button:hover span { display: none } button:hover:before { content: “Add a Comment” }
Trước và sau khi di chuột
Trước khi di chuột với hiệu ứng Rainbow Underline với hiệu ứng Text Swapping on hover
Sau khi di chuột với hiệu ứng Rainbow Underline với hiệu ứng Text Swapping on hover
Các website gợi ý ý tưởng về hover
Nếu bạn muốn tạo hiệu ứng hover nhưng đang bị “bí” ý tưởng thì có thể tham khảo các website dưới đây
Canva
Canva là một website được sử dụng phổ biến để tạo ra các thiết kế đẹp mắt. Đây là một trang web này có hiệu ứng hover tuyệt vời, từ trang chủ đến trang sản phẩm. Tất cả bắt đầu với nền tối mờ trên trang chủ. Tuy nhiên, khi di chuột qua, nền được xóa và hình ảnh trở nên rõ dần. Hiệu ứng hover cũng xuất hiện khi bạn chọn các mẫu thiết kế khác nhau.
Haus
Haus là một trang web điển hình để bạn tham khảo các hiệu ứng hover như gạch chân, thay đổi văn bản hay đổi màu nền khi di chuột qua.
Mainworks
Mainworks áp dụng cả hiệu ứng chuyển động và chuyển tiếp cho các hiệu ứng hover của mình. Một số hiệu ứng đáng chú ý là thay đổi văn bản khi di chuột qua, thay đổi màu sắc văn bản và phóng to văn bản và hình ảnh khi di chuột qua.
Trên đây là 5 hiệu ứng CSS hover phổ biến nhất mà Mellori đã tổng hợp lại, giúp các website trở nên bắt mắt và thu hút hơn. Hãy sử dụng các yếu tố này để các doanh nghiệp cải thiện trải nghiệm người dùng tốt hơn trên website của mình nhé!
Nguồn: https://sigma.edu.vn
Danh mục: Công Nghệ
