CSS 가상 클래스와 transition으로 버튼에 생명 불어넣기: 인터랙션 디자인 핵심

웹 디자인은 단순한 ‘보기 좋은 디자인’을 넘어, 사용자와의 직관적 소통을 중시하는 방향으로 나아가고 있습니다. 이 중 버튼은 가장 기본적이면서도 강력한 인터랙션 도구로, CSS 가상 클래스(:hover, :active, :focus)를 활용하면 정적 디자인에 동적인 반응성을 부여할 수 있습니다.
예를 들어, :hover로 마우스 오버 시 미세한 색상 변화를 주거나, :active로 클릭 순간의 물리적 피드백을 모방하면 사용자는 ‘기대한 대로 반응하는 인터페이스’를 경험하게 됩니다.  :focus는 키보드 사용자를 위한 접근성 핵심 요소로, 시각적 초점을 명확히 해 주는 역할을 합니다. 과거에는 웹디자인은 PC에서 보는 것이 전부였기 때문에 마우스 오버 시 디자인에 변화를 주는 것만 고려했습니다. 하지만 모바일에서의 웹 사용량이 더 많은 현재에는 :hover 디자인만으로는 동적인 디자인이 불가능해졌습니다. 이런 이유로 :active의 역할이 중요해졌습니다.  

 

버튼에 가상 선택자 사용하기

버튼으로 사용이 가능한 HTML 엘리먼트는 <a>, <input type="submit">, <input type="button">, <button>이 있습니다. 가상선택자는 CSS의 유용한 속성입니다. 네 가지 엘리먼트 모두 가상 선택자를 이용해 동적인 디자인을 만들 수 있습니다.

a:link { ... } /* a { ... } 로 써도 작동합니다. */ 
a:hover { ... }
a:active { ... }
a:focus { ... }

button { ... }
button:hover { ... }
button:active { ... }
button:focus { ... }

 

상태에 맞는 버튼 디자인

먼저 피그마를 이용해 버튼을 디자인해 보겠습니다. 일반 상태, 마우스 오버 상태, 클릭을 하고 있을 때, 키보드로 이동해 버튼에 포커싱이 되었을 때 디자인까지 총 4가지 디자인이 필요합니다. 평소에는 파란색 배경의 버튼을 hover 했을 때 남색으로 변경하고, active 상태일 땐 아래로 3픽셀 내려가도록 해서 버튼이 꾹 눌린 모양을 만들어 보겠습니다. 그리고 focus 상태일 때는 버튼의 테두리에 파란색 점선을 넣어보겠습니다.

상황 별 버튼 디자인

아무런 액션이 없을 때의 버튼

먼저 아무런 액션이 없을 때의 파란색 버튼 코드를 작성해보겠습니다. 

<style>
    .button {
      display: inline-block; 
      padding: 12px 24px; 
      border-radius: 8px;
      border: 0;
      background-color: #202AEB;
      color: #fff;
      /* 가상선택자로 버튼의 상태가 바뀌면 모든 속성(all)이 0.3초만큼 애니메이션 효과를 갖습니다. */
      transition: all .3s; 
    }
</style>
<button class="button">Button Label</button>

 

마우스를 오버했을 때의 버튼 (:hover)

마우스가 오버 되었을 때는 배경색만 변화 시킬 것이기 때문에 background-color만 지정합니다.

.button:hover {
  background-color: #000782;
}

 

마우스로 버튼을 클릭 했을 때 (:active)

버튼을 클릭하고 있는 동안에는 transform: translateY() 속성을 이용해 버튼을 아래쪽으로 3픽셀만큼 내렸습니다. transition: all .3s이 적용되어 있기 때문에 아래로 눌리는 효과도 애니메이션 효과를 갖습니다.

.button:active {
  transform: translateY(3px);
}

 

키보드로 이동하다가 버튼에 포커싱이 되었을 때

파란색 버튼 바깥으로 2픽셀만큼 여백이 있고 그 밖으로 점선을 넣고 싶습니다. 그럴 때는 outline-offset 속성을 이용하면 됩니다. 아웃라인을 넣기 전, 여백 영역을 설정할 수 있습니다. 

.button:focus {
  background-color: #202AEB; 
  outline: 2px dotted #202AEB;
  outline-offset: 2px;
}

 

이렇게 코드를 작성했더니, 포커스 되었을 때 디자인이 조금 이상합니다. 아웃라인에도 0.3초만큼 애니메이션이 생기면서 아웃라인이 서서히 나타나는 것이 조금 어색하게 느껴집니다. transition에 all 대신, 배경색이나 translateY에만 트랜지션 효과를 주고, 아웃라인은 바로 나타나는 것이 더 매끄러울 것 같습니다. 

.button {
  display: inline-block; 
  padding: 12px 24px; 
  border-radius: 8px;
  border: 0;
  background-color: #202AEB;
  color: #fff;
  
  /* 배경색은 0.3초만큼, Y축으로 3픽셀 이동하는 것은 0.2초만큼 트랜지션 효과 부여 */
  transition: background-color .3s, transform .2s;
}

 

최종 버튼 디자인 소스코드

 

마치며

가상선택자를 이용해서 다양한 효과를 줄 수 있습니다. 간단한 예시로 작성해보았지만, 마우스 오버 시 버튼의 배경색은 그대로 두고 글자만 이동하게 하는 것 또한 가능합니다. 그림자 효과를 조정하거나 :before, :after의 가상 선택자도 활용해 밑줄이 생기고 없어지게 하는 것도 가능하지요. 위의 원리를 이용해 사용자에게 반응하는 디자인을 시도해보시길 바랍니다.