CSS로 버튼에 물결(리플) 애니메이션 효과 적용하는 방법

웹 페이지에서 버튼을 클릭할 때 물결(리플) 효과처럼 보이는 애니메이션은 CSS만으로도 손쉽게 구현할 수 있습니다. 핵심 아이디어는 ::after 가상 요소를 이용해 버튼 위에 노란색 레이어를 만들어 두고, 평소에는 투명하게 숨겨 두었다가 사용자가 버튼을 누르는 순간(:active 상태) 크기를 줄이면서 나타나게 하는 것입니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    background-color: rgb(100, 0, 84);
    border: none;
    font-size: 28px;
    color: rgb(255, 169, 255);
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    box-shadow: 5px 10px 18px rgb(121, 82, 185);
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
button:after {
    content: "";
    background: rgb(251, 255, 0);
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>
<h1>애니메이션 버튼 예제</h1>
<button>Click Here</button>
<h1>위 버튼을 클릭하면 물결 효과를 확인할 수 있습니다</h1>
</body>
</html>

코드 설명

위 예제에서 주목해야 할 부분은 다음과 같습니다.

overflow: hidden; — 버튼 밖으로 삐져나오는 리플 레이어를 잘라내어 효과가 버튼 영역 안에서만 보이도록 합니다.
button:after — 노란색(rgb(251, 255, 0)) 원형 레이어를 버튼보다 훨씬 크게(padding 300%, 350%) 만들고, opacity: 0으로 평소에는 보이지 않게 처리합니다.
button:active:after — 버튼을 누르는 동안 레이어의 크기와 여백을 0으로 줄이고 불투명도를 1로 변경해, 마치 물결이 퍼지는 듯한 시각적 효과를 연출합니다.

출력 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS로 버튼에 물결(리플) 애니메이션 효과 적용하는 방법

버튼을 마우스로 클릭하고 있는 동안 노란색 물결 효과가 퍼지며, 손을 떼면 다시 원래 상태로 부드럽게 돌아갑니다. 색상, 전환 시간(transition-duration), 그림자 값을 조절하면 자신만의 스타일로 쉽게 응용할 수 있습니다.