CSS :active 선택자로 버튼 클릭 시 눌리는 효과 구현하기

웹 페이지에서 버튼을 클릭했을 때 실제로 눌리는 듯한 입체적인 효과를 주면 사용자 경험이 한층 향상됩니다. CSS만으로도 자바스크립트 없이 간단하게 이 효과를 구현할 수 있으며, 핵심은 :active 가상 클래스와 box-shadow, transform 속성의 조합입니다.

버튼 눌림 효과의 원리

기본 상태의 버튼에는 아래 방향으로 그림자(box-shadow: 0 5px #999)를 적용해 입체감을 만들어 줍니다. 그리고 버튼이 클릭되는 순간 발동하는 :active 가상 클래스에서 transform: translateY(2px)를 사용해 버튼을 아래로 2px 내려주고, 그림자 색을 회색으로 바꿔 눌린 느낌을 연출합니다.

또한 :hover 가상 클래스를 함께 사용하면 마우스를 올렸을 때 배경색이 변하면서 버튼에 대한 시각적 피드백을 강화할 수 있습니다.

CSS 버튼 눌림 효과 예제 코드

아래 코드를 실행하여 버튼 클릭 시 나타나는 눌림 효과를 직접 확인해 보세요.

예제

<!DOCTYPE html>
<html>
   <head>
      <style>
         .button {
            background-color: orange;
            color: white;
            border: none;
            border-radius: 7px;
            box-shadow: 0 5px #999;
            display: inline-block;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            outline: none;
         }
         .button:hover {
            background-color: blue;
         }
         .button:active {
            background-color: orange;
            box-shadow: 0 5px gray;
            transform: translateY(2px);
         }
      </style>
   </head>
   <body>
      <button class = "button">Result</button>
   </body>
</html>

코드 설명

.button — 주황색 배경과 흰색 글자, 둥근 모서리(border-radius)를 적용하고, 하단에 5px 두께의 그림자를 추가해 기본 입체감을 부여합니다.
.button:hover — 마우스 포인터를 올리면 배경색이 파란색으로 변경되어 호버 상태임을 알려줍니다.
.button:active — 버튼을 클릭하는 동안 translateY(2px)로 버튼을 아래로 밀어내고 그림자 색을 회색으로 바꿔, 실제로 눌리는 듯한 효과를 만듭니다.

cursor: pointer 속성은 마우스를 올렸을 때 커서가 손가락 모양으로 바뀌게 하여 클릭 가능한 요소임을 직관적으로 알 수 있게 해줍니다.