Hiệu ứng khi di chuột lên nút
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 41 trên 43.
Thử thách
DễMột nút đã có sẵn trong HTML. Mục tiêu của bạn là làm cho nút phóng to nhẹ khi người dùng di chuột lên. Trong CSS, định dạng .cta-button sao cho:
- Nút chuyển tiếp mượt mà với
transition: transform 0.3s ease;. - Khi di chuột lên, kích thước nút tăng nhẹ bằng cách dùng
transform: scale(1.05).
Tự làm thử
<html>
<head>
<title>Button Hover Effect</title>
<style>
/* Add your styles here */
.cta-button {
background-color: #6a1b9a;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
</style>
</head>
<body>
<button class="cta-button">Click Me</button>
</body>
</html>
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tập3Các lớp giả cấu trúc
Các lớp giả cấu trúcChọn phần tử con đầu tiênChọn phần tử con cuối cùngSức mạnh của mẫu: dùng nth-childThử thách ôn tập6Trang đích
Tạo kiểu cho phần đầu trangTạo kiểu cho nútBố cục phầnBố cục thẻThêm các chi tiết hoàn thiện9Thử thách cuối cùng
Làm nổi bật menu đang hoạt độngTô màu xen kẽ các hàng trong bảngHiệu ứng khi di chuột lên nútBố cục thẻ dạng lướiẢnh chính làm mờTự luyện tập: Playground Web