Hiệu ứng di chuột
Bài học 7 trên 8 trong khóa học Dự án CSS: nút bấm bắt mắt của Coddy.
Hãy tạo một hiệu ứng khi di chuột lên nút!
Để thay đổi nút khi di chuột lên, ta dùng lớp giả :hover,
.fancyButton:hover {
background-color: red;
}Trong ví dụ trên, nút sẽ chuyển sang màu đỏ khi được di chuột lên!
Để hiệu ứng chuyển đổi mượt mà, hãy dùng:
.fancyButton {
...
transition: all 0.2s;
}Bạn có thể thử điều chỉnh thời gian chuyển đổi (0.2s).
Thử thách
DễThêm hiệu ứng di chuột vào nút để nút trông đẹp hơn!
Các yêu cầu:
- Thêm thuộc tính transition vào nút, với thời gian tùy bạn chọn, không quá 1 giây.
- Thêm
opacity: 0.8;vào hiệu ứng di chuột của nút.
Các thuộc tính tùy chọn và được gợi ý để thay đổi khi di chuột:
- đổ bóng (
box-shadow) - màu nền
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Viết code HTML ở đây -->
</body>
</html>Tất cả bài học trong Dự án CSS: nút bấm bắt mắt
Tự luyện tập: Playground Web