호버 효과
Coddy의 CSS 프로젝트 - 멋진 버튼 코스 레슨 — 8개 중 7번째.
버튼 위에 마우스를 올렸을 때 효과를 만들어 봅시다!
마우스를 올렸을 때 버튼을 변경하려면 :hover 가상 클래스를 사용합니다.
.fancyButton:hover {
background-color: red;
}위의 예제에서 버튼 위에 마우스를 올리면 버튼이 빨간색으로 변합니다!
전환을 부드럽게 만들려면 다음을 사용하세요.
.fancyButton {
...
transition: all 0.2s;
}전환 시간(0.2s)을 조절해 볼 수 있습니다.
챌린지
쉬움버튼에 호버 효과를 추가하여 멋지게 만들어 보세요!
필수 과제:
- 버튼에 transition 속성을 추가하세요. 시간은 1초 이하로 자유롭게 선택하세요.
- 버튼의 호버 효과에
opacity: 0.8;를 추가하세요.
호버 시 변경할 수 있는 선택 사항 및 권장 속성:
- 그림자 (
box-shadow) - 배경색
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>