순수 CSS로 버튼에 릴리프 효과 생성 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자 및 UI/UX 디자이너
• CSS 애니메이션 기초 지식 보유자
• JavaScript 사용을 피하고자 하는 경우
• 난이도: 중간 (CSS 애니메이션 및 의사 요소 사용)

핵심 요약

• :after 의사 요소와 @keyframes 애니메이션을 사용하여 릴리프 효과 구현
• CSS 변수 --x, --y를 통해 클릭 위치 기반 효과 위치 조정
• Material Design 스타일의 릴리프 효과를 순수 CSS로 구현 가능

섹션별 세부 요약

1. 릴리프 효과 개요

• 릴리프 효과는 Material Design에서 사용되는 사용자 상호작용 피드백 메커니즘
• 클릭 시 효과가 중심으로부터 확장되며 투명도 0으로 사라짐
• JavaScript 대신 순수 CSS로 구현 가능

2. HTML 구조 및 기본 스타일링

• .ripple-btn 클래스 사용
• position: relative, overflow: hidden 설정으로 효과 영역 제한
• :hover 상태에서 배경색 변화 적용

3. 애니메이션 구현

• .ripple-btn:after 의사 요소 생성
• @keyframes ripple 애니메이션 정의: scale(0) → scale(4) + opacity: 0
• transform: scale(0) 초기 상태 설정

4. 클릭 위치 기반 효과 위치 조정

• CSS 변수 --click-x, --click-y 사용
• :active 상태에서 calc()로 중심 좌표 계산
• transform: translate(var(--x), var(--y))로 효과 위치 조정

5. 제한사항 및 고려사항

• JavaScript 대비 반응성 및 유연성 한계
• 모든 브라우저 호환성 확인 필요 (모던 브라우저 지원)
• 릴리프 색상 변경 시 .ripple-btn:after의 background 속성 수정

결론

• 순수 CSS로 릴리프 효과를 구현할 때는 :after 의사 요소와 @keyframes 애니메이션을 결합하여 사용
• --x, --y 변수를 통해 클릭 위치 기반 효과 위치 조정이 핵심
• JavaScript 사용 시보다 제한적이지만, Material Design 스타일의 시각적 피드백 효과를 제공
• scale 및 애니메이션 시간 파라미터 조정으로 효과 외형 커스터마이징 가능