CSS :hover 선택자로 호버 효과 버튼 만드는 방법

CSS로 호버(Hover) 효과가 있는 버튼 만들기

웹 페이지에서 버튼에 마우스를 올렸을 때 색상이나 테두리가 자연스럽게 변하는 호버 효과는 사용자 경험을 높이는 대표적인 UI 기법입니다. CSS의 :hover 선택자를 사용하면 별도의 JavaScript 없이도 손쉽게 구현할 수 있습니다.

:hover 선택자는 요소 위에 마우스 포인터가 올라간 순간 지정한 스타일을 적용합니다. 아래 예제 코드를 직접 실행해 보면서 동작 방식을 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         .btn {
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 15px;
            padding: 20px;
            border-radius: 15px;
            border: 3px dashed blue;
         }
         .btn:hover {
            background-color: orange;
            color: black;
            border: 3px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>결과</h2>
      <p>아래 버튼에 마우스를 올려보세요:</p>
      <button class = "btn">결과 확인</button>
   </body>
</html>

코드 설명

.btn (기본 상태) — 노란색 배경, 검은 글자, 파란색 점선(dashed) 테두리, 둥근 모서리(border-radius: 15px)가 적용됩니다.
.btn:hover (호버 상태) — 마우스를 올리면 배경색이 주황색으로 바뀌고, 테두리가 점선에서 파란색 실선(solid)으로 전환됩니다.

추가 팁

전환 효과를 더 부드럽게 하고 싶다면 .btn에 transition: background-color 0.3s, border 0.3s;를 추가해 보세요. 색상과 테두리가 즉시 바뀌지 않고 자연스럽게 애니메이션되어 훨씬 세련된 느낌을 줍니다.