728x90
300x250
SMALL
앞서 배운 hover, transtion, transform, animation을 조합하여 실전 UI 효과를 구현해 봅시다.
예제 목록
- 호버 시 색상과 크기가 동시에 바뀌는 버튼
- 클릭 시 눌리는 느낌의 버튼(:active)
- 포커스 시 강조되고 깜빡이는 애니메이션 추가
- disabled 상태일 때 스타일 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.fancy-btn {
padding: 12px 24px;
font-size: 16px;
background-color: #2980b9;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.fancy-btn:hover {
background-color: #1abc9c;
transform: scale(1.05);
}
.fancy-btn:active {
transform: scale(0.95);
}
.fancy-btn:focus {
outline: 2px solid #f39c12;
animation: focus-blink 1s infinite;
}
@keyframes focus-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.fancy-btn:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="fancy-btn">버튼 효과 보기</button>
</body>
</html>
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 스크롤 내리면 애니메이션 실행하기 적용 방법 [html + JavaScript] (0) | 2025.05.25 |
|---|---|
| 다양한 의사 클래스(:focus, :active, :checked) (0) | 2025.05.18 |
| animation @keyframes 으로 반복되는 움직임 만들기 (0) | 2025.05.15 |
| transform으로 요소를 움직이고 회전시키기 (0) | 2025.05.13 |
| transition으로 부드러운 애니메이션 만들기 (0) | 2025.05.12 |
댓글