Hiệu ứng Fade In khi hover Button với CSS

Button Fade In trên Hover (Opacity Transition)

Dùng `opacity` + `transition` để button **mờ đi bình thường**, **sáng lên khi hover**. Lưu ý: `opacity: 2` trong ví dụ gốc **không hợp lệ** (max 1), cần sửa thành `1`.

Ví dụ sửa lỗi (opacity: 1 khi hover)

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background-color: orange;
      color: white;
      padding: 10px 20px;
      text-align: center;
      font-size: 16px;
      margin: 5px;
      opacity: 0.5;                    /* Mặc định mờ 50% */
      transition: opacity 0.3s ease;   /* Transition mượt 0.3s */
      display: inline-block;
      text-decoration: none;
      border-radius: 6px;
      border: none;
      cursor: pointer;
    }
    .btn:hover {
      opacity: 1;                      /* Sửa: opacity max = 1 */
    }
  </style>
</head>
<body>
  <button class="btn">Result</button>
</body>
</html>

Các biến thể Fade Effect

Hiệu ứng	CSS
Fade In (mờ → rõ)	`opacity: 0.5 → 1`
Fade Out (rõ → mờ)	`opacity: 1 → 0.5`
Fade In từ ẩn	`opacity: 0; visibility: hidden` → `opacity: 1; visibility: visible`
Crossfade (đổi background)	2 layer chồng nhau, fade opacity top layer

Button Style Hoàn Chỉnh với Fade Hover

.btn {
  /* Base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  
  /* Fade effect */
  background-color: #2563eb;
  color: white;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.btn:active {
  opacity: 0.9;
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

Lưu ý quan trọng

opacity max = 1. Giá trị >1 (như `opacity: 2` trong ví dụ gốc) **vô hiệu/hại**.
`transition` trên `.btn` (không phải `:hover`) để **cả 2 chiều** (hover vào/ra) đều mượt.
Kết hợp `transform: translateY(-1px)` tạo cảm giác "nâng nhẹ" (elevation).

`focus-visible` cho accessibility (keyboard navigation).

So sánh: opacity vs visibility vs display

/ * Fade mượt - KHUYẾN NGHỊ * /
.btn { opacity: 0.5; transition: opacity 0.3s; }
.btn:hover { opacity: 1; }

/ * Ẩn/hiện đột ngột - KHÔNG mượt * /
.btn { visibility: hidden; }
.btn:hover { visibility: visible; }

/ * Ẩn hoàn toàn, không chiếm layout * /
.btn { display: none; }
.btn:hover { display: inline-block; } /* Không transition được */