Bài 19: Hover, active, focus – hiệu ứng khi tương tác

🔗 Bài học khác trong chuyên mục:

Một trang web không chỉ cần đẹp, mà còn phải tương tác tốt với người dùng. Khi người dùng rê chuột, nhấp chuột, hay nhập liệu, giao diện nên phản hồi một cách rõ ràng để tạo trải nghiệm thân thiện và chuyên nghiệp.

Trong bài học này, bạn sẽ học:

Cách dùng các pseudo-classes: :hover, :active, :focus
Áp dụng hiệu ứng khi người dùng di chuột, bấm nút, hoặc nhập dữ liệu
Thực hành tạo nút có hiệu ứng, form có viền sáng khi focus

1. :hover – hiệu ứng khi rê chuột

button:hover {
  background-color: #2ecc71;
  color: white;
  cursor: pointer;
}

Khi người dùng rê chuột vào thẻ button, màu nền đổi thành xanh lá, chữ trắng. Bạn cũng có thể đổi border, transform, thêm bóng, v.v.

2. :active – hiệu ứng khi nhấn chuột

button:active {
  transform: scale(0.95);
}

active xảy ra ngay lúc nhấn chuột xuống (chưa nhả ra). Thường dùng để tạo hiệu ứng “ấn vào” như nút lún nhẹ.

3. :focus – hiệu ứng khi focus vào input/form

input:focus {
  border: 2px solid #3498db;
  outline: none;
}

Khi người dùng click vào ô nhập, đường viền sẽ đổi màu. outline: none giúp bỏ khung mặc định của trình duyệt.

4. Thực hành: tạo nút có hiệu ứng tương tác

style.css

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

button:active {
  transform: scale(0.95);
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bài 19 – Hover, Active, Focus</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <button>Bấm vào tôi</button>

</body>
</html>

5. Thực hành: ô nhập liệu có hiệu ứng focus

Thêm vào style.css

input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}

input[type="text"]:focus {
  border-color: #e67e22;
  outline: none;
}

HTML:

<input type="text" placeholder="Nhập tên của bạn">

6. Ghi nhớ

Pseudo-class	Dùng để làm gì
`:hover`	Khi rê chuột vào phần tử
`:active`	Khi nhấn giữ chuột vào phần tử
`:focus`	Khi phần tử (thường là input) được focus

Mẹo nhỏ

Kết hợp các hiệu ứng với transition để trông mượt mà hơn
Sử dụng cùng bộ màu sắc để đảm bảo giao diện nhất quán
Tránh làm hiệu ứng quá mạnh gây khó chịu

Bài học trước ← Bài 18: So sánh Flexbox và Grid – Nên dùng khi nào? Bài học tiếp theo Bài 20: Transition – hiệu ứng mượt mà trong CSS →