버튼 호버 효과
Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 41번째.
챌린지
쉬움HTML에 버튼이 이미 있습니다. 사용자가 버튼 위에 마우스를 올렸을 때(hover) 크기가 약간 커지도록 만드는 것이 목표입니다. CSS에서 .cta-button을 다음과 같이 스타일링하세요:
- 부드러운 전환 효과
transition: transform 0.3s ease;를 가집니다. - 마우스를 올렸을 때(hover),
transform: scale(1.05)를 사용하여 크기가 약간 커집니다.
직접 해보기
<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>