CSS로 둥근 활성 및 호버 버튼 만드는 방법

CSS로 둥근 활성 및 호버 버튼 만들기

웹 페이지의 버튼이나 링크에 마우스를 올렸을 때 시각적인 반응을 추가하려면 :hover 선택자를 사용합니다. 또한 버튼에 둥근 모서리 효과를 적용하려면 border-radius 속성을 활용하면 됩니다. 이 두 가지를 조합하면 현재 위치를 알려주는 활성(active) 버튼과 마우스 오버 시 부드럽게 반응하는 호버(hover) 버튼을 손쉽게 만들 수 있습니다.

핵심 CSS 개념

:hover 선택자 – 사용자가 요소 위에 마우스 포인터를 올렸을 때 스타일을 변경합니다.
border-radius 속성 – 요소의 모서리를 둥글게 처리해 부드러운 느낌을 줍니다.
:not(.active) – 현재 활성화된 항목에는 호버 효과가 적용되지 않도록 제외하여, 선택된 페이지를 명확하게 구분합니다.

예제 코드

아래 코드를 실행하면 둥근 형태의 활성 버튼과 호버 효과가 적용된 내비게이션 메뉴를 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            border-radius: 5px;
         }
         .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
         }
         .demo a:hover:not(.active) {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h2>퀴즈</h2>
      <div class = "demo">
         <a href = "prev.html">&lt;</a>
         <a href = "quiz1.html">Quiz1</a>
         <a href = "quiz2.html">Quiz2</a>
         <a href = "quiz3.html">Quiz3</a>
         <a href = "quiz4.html" class = "active">Quiz4</a>
         <a href = "next.html">&gt;</a>
      </div>
   </body>
</html>

코드 설명

.demo a.active 규칙은 현재 보고 있는 페이지(Quiz4)를 주황색 배경과 흰색 글자로 강조하여 방문자가 자신의 위치를 쉽게 인식하도록 합니다. 반면 .demo a:hover:not(.active) 규칙은 활성 버튼을 제외한 나머지 링크에 마우스를 올렸을 때 노란색 배경이 나타나도록 설정합니다. border-radius: 5px; 덕분에 모든 버튼이 각진 사각형 대신 둥근 모양으로 표시되어 전체적으로 세련된 UI를 완성할 수 있습니다.