CSS로 버튼 호버 시 페이드 인 효과 구현하기
웹 페이지에서 버튼 위에 마우스 커서를 올렸을 때(호버) 요소가 부드럽게 나타나는 페이드 인(fade-in) 효과는 자바스크립트 없이 CSS만으로도 간단하게 구현할 수 있습니다. 핵심은 opacity(투명도) 속성과 transition(전환) 속성, 그리고 :hover 가상 클래스의 조합입니다.
핵심 속성 살펴보기
- opacity: 요소의 투명도를 지정합니다. 값은 0(완전히 투명)부터 1(완전히 불투명) 사이로 설정할 수 있습니다.
- transition: 속성값이 변할 때 일정 시간에 걸쳐 부드럽게 전환되도록 만듭니다.
- :hover: 마우스 포인터가 요소 위에 올라왔을 때 적용되는 스타일을 정의하는 가상 클래스입니다.
예제 코드
아래 코드를 실행하면 버튼이 기본적으로 반투명 상태로 표시되고, 마우스를 올리면 서서히 선명하게 바뀌는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: orange;
color: white;
padding: 10px;
text-align: center;
font-size: 16px;
margin: 5px;
opacity: 0.5;
transition: 0.5s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<button class = "btn">결과 확인</button>
</body>
</html>코드 설명
.btn 클래스에는 기본 배경색(주황색), 흰색 글자, 여백 등 버튼의 기본 스타일과 함께 opacity: 0.5가 적용되어 있어 처음에는 반투명하게 보입니다. 또한 transition: 0.5s 덕분에 투명도가 변할 때 0.5초에 걸쳐 부드럽게 전환됩니다.
마우스를 버튼 위에 올리면 .btn:hover 규칙이 활성화되어 opacity가 1로 변경되고, 이때 transition 효과와 함께 페이드 인 애니메이션이 자연스럽게 연출됩니다.
참고:opacity값은 0에서 1 사이만 유효합니다. 1보다 큰 값을 입력해도 브라우저는 최대값인 1로 처리하므로, 완전히 불투명한 상태를 원한다면 반드시opacity: 1로 지정하는 것이 좋습니다.
이처럼 transition과 :hover를 활용하면 별도의 라이브러리나 스크립트 없이도 다양한 마이크로 인터랙션을 손쉽게 만들 수 있습니다. 색상 변화, 크기 확대, 그림자 효과 등 다른 속성에도 같은 방식을 응용해 보세요.