웹사이트를 위한 5가지 고급 CSS 호버 효과 [2023]

CSS 호버 효과로 웹사이트에 생동감 불어넣기

대부분의 현대 웹사이트는 스타일을 적용하기 위해 CSS(Cascading Style Sheets)를 활용합니다. 일부 웹사이트는 기본적인 CSS 기능만을 사용하는 반면, 다른 웹사이트는 더욱 복잡한 기능을 활용하여 웹 애플리케이션을 시각적으로 더욱 매력적으로 만듭니다.

눈길을 사로잡는 효과를 추가하면 웹사이트의 클릭률을 높이고, 사용자가 특정 행동을 취하도록 유도하거나 웹사이트에 머무는 시간을 늘리는 데 도움이 될 수 있습니다. 이러한 상호작용 요소는 사용자 경험을 향상시키고 사이트의 전반적인 매력을 높입니다.

본 글에서는 CSS 호버 효과가 무엇인지, 어떻게 웹사이트를 시선을 사로잡게 만들 수 있는지, 그리고 이러한 효과를 어떻게 구현하는지에 대해 자세히 알아보겠습니다. 또한 고급 CSS 호버 효과를 성공적으로 적용한 웹사이트의 예시를 살펴보며 실질적인 영감을 얻어갈 수 있습니다.

CSS 호버 효과란 무엇일까요?

CSS 호버 효과는 사용자가 마우스 포인터를 특정 웹 요소 위로 이동할 때 발생하는 시각적 변화를 의미합니다. 이러한 변화는 색상, 텍스트, 애니메이션 등 다양한 형태로 나타날 수 있으며, 웹사이트에 상호작용성을 더하고 사용자가 콘텐츠를 더욱 쉽고 재미있게 탐색할 수 있도록 도와줍니다.

CSS 호버 효과는 크게 전환(transition) 효과와 애니메이션(animation) 효과의 두 가지 방식으로 구현할 수 있습니다.

전환 (Transition)

전환 효과는 웹 페이지 내 요소의 모양이나 동작을 부드럽게 변경하는 데 사용됩니다. 사용자의 마우스 호버와 같은 특정 트리거 이벤트가 발생하면 요소의 속성이 초기 상태에서 최종 상태로 부드럽게 변환됩니다. 전환 효과는 한 번만 실행되며, 중간 단계에 대한 세부 제어는 불가능합니다.

애니메이션 (Animation)

애니메이션 효과는 전환 효과보다 더욱 복잡하고 다이나믹한 변화를 제공합니다. 키프레임을 사용하여 요소의 중간 상태를 지정할 수 있으며, 반복, 루프, 역방향 재생 등 다양한 설정을 통해 더욱 세밀한 제어가 가능합니다. 키프레임은 애니메이션 시퀀스 중 특정 시점에 요소가 어떻게 렌더링되어야 하는지를 정의합니다.

다양한 CSS 호버 효과 유형

CSS 호버 효과는 텍스트, 이미지, 비디오, 링크, 버튼 등 웹사이트의 다양한 요소에 적용할 수 있습니다. 다음은 주요 적용 사례 몇 가지입니다.

#1. 텍스트 호버 효과

텍스트 호버 효과는 미니멀한 디자인을 추구하는 웹사이트에 적합합니다. 디자인은 단순하지만 핵심 메시지를 효과적으로 전달해야 합니다. 이러한 효과는 다음과 같은 형태로 나타날 수 있습니다.

터미널 텍스트 효과: 텍스트 프로세서에서 타이핑하는 듯한 효과를 모방합니다. 단어가 깜박거리면서 나타나지만 사용자가 내용을 읽을 수 있도록 적절한 속도로 진행됩니다.
텍스트 애니메이션: 텍스트가 위, 아래 또는 옆으로 미끄러지듯 움직이는 효과입니다.

#2. 링크 호버 효과

대부분의 웹사이트는 사용자를 다른 페이지로 연결하는 하이퍼링크를 포함합니다. 웹사이트 규모가 커질수록 이러한 링크의 수도 증가합니다. 링크 호버 효과는 사용자에게 시각적인 피드백을 제공하여 사용성을 향상시킵니다. 효과는 다음과 같은 형태로 구현할 수 있습니다.

링크 색상 변경: 예를 들어, 기본 색상인 파란색에서 마우스 호버 시 빨간색으로 변경됩니다.
배경색 변경: 링크의 배경색이 마우스 호버 시 변경됩니다.
텍스트 교환: 링크 아이콘 또는 텍스트 내용이 변경됩니다.

#3. 버튼 호버 효과

버튼은 웹사이트에서 사용자의 액션을 유도하는 중요한 요소입니다. 사용자가 양식을 제출하거나 웹 페이지의 특정 섹션에 접근할 수 있도록 합니다. 버튼 호버 효과는 사용자의 상호작용을 유도하고 시각적 만족도를 높입니다. 버튼 호버 효과는 다음과 같은 형태로 구현될 수 있습니다.

텍스트 색상 변경: "클릭하세요"와 같은 텍스트가 적힌 버튼의 텍스트 색상이 마우스 호버 시 빨간색에서 녹색으로 변경될 수 있습니다.
배경색 변경: 버튼의 배경색이 마우스 호버 시 변경될 수 있습니다. 예를 들어, 기본적으로 투명한 버튼의 배경색이 갈색에서 녹색으로 바뀔 수 있습니다.
바운스 효과: 버튼이 마우스 호버 시 살짝 튀어오르는 듯한 효과를 주어 시각적인 즐거움을 더할 수 있습니다.

#4. 이미지 호버 효과

이미지 교체: 마우스 호버 시 이미지가 다른 이미지로 바뀌는 이미지 캐러셀을 만들 수 있습니다.
이미지 페이드 인/아웃: 마우스 호버 시 이미지가 더욱 선명하게 나타나거나 흐릿하게 사라지는 효과를 적용할 수 있습니다.

텍스트 스왑: 이미지에 숨겨진 설명이나 정보를 표시할 수 있습니다. 예를 들어, 여행 웹사이트에서 호텔 이미지를 호버하면 해당 호텔에 대한 상세 정보를 표시할 수 있습니다.

이제 웹사이트에 적용할 수 있는 몇 가지 고급 CSS 호버 효과를 자세히 살펴보겠습니다.

마우스 호버 시 배경색 변경

이 효과는 웹 페이지에 나타나는 버튼, 링크, 텍스트 등에 적용할 수 있습니다. 마우스 커서가 요소에 닿으면 배경색이 변경됩니다.

텍스트 배경색을 변경하는 과정은 다음과 같습니다.

:hover 의사 클래스를 사용하여 효과를 적용합니다.
호버 효과를 적용할 요소(div, 버튼, 링크 등)를 만듭니다.

다음은 효과 구현을 위한 예시 코드입니다.

HTML 파일

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
      </head>
      <body>
        <div>
          마우스를 올려서 변화를 확인하세요!
        </div>
      </body>
      </html>

CSS 파일

      div:hover {
        background-color: rgb(255, 0, 0);
        width: 18rem;
        align-items: center;
        text-align: center;
      }

마우스 호버 전 상태:

마우스 호버 후 상태:

마우스 호버 시 링크 색상 변경

링크는 웹페이지에서 다른 페이지로 이동할 수 있게 해주는 중요한 요소입니다. 하이퍼링크는 HTML의 <a> 태그를 사용하여 만듭니다. 마우스 오버 시 링크 색상을 변경하면 링크의 가시성을 높일 수 있습니다.

이 효과를 구현하려면 다음 단계를 따릅니다.

<head> 또는 <body> 태그 내에서 선택자 태그를 만듭니다.
:hover 의사 클래스를 정의합니다.

다음 샘플 코드를 사용하여 마우스 호버 시 녹색에서 주황색으로 변하는 링크를 만들 수 있습니다.

HTML 파일:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
        </head>
        <body>
            <div>
                <a href="#">마우스를 올리면 마법이 펼쳐집니다!</a>
            </div>
        </body>
        </html>

CSS 파일:

        a:link {
            color: rgb(0, 255, 34);
        }
        a:hover {
            color: #ff8400;
        }

마우스 호버 전 링크 상태:

마우스 호버 후 링크 상태:

마우스 호버 시 슬라이딩 하이라이트

사용자가 마우스를 올리면 이 효과는 인라인 링크에 박스 그림자를 추가합니다. 또한 링크의 색상이 변경됩니다. 이를 구현하려면 다음 단계를 따를 수 있습니다.

링크 전체에 패딩을 추가합니다(0.25rem 정도가 적절합니다).
비슷한 값의 마진을 추가합니다. 이렇게 하면 패딩이 텍스트 흐름을 방해하지 않습니다.

다음은 간단한 html 파일입니다.

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <a href="#">koreantech.org</a>
            <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
        </head>
        <body>
        </body>
        </html>

다음은 CSS 파일입니다.

        a {
            box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
            color: #ff4000;
            padding: 0 .25rem;
            margin: 0 -.25rem;
            transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
        }
        a:hover {
            color: #fff;
            box-shadow: inset 200px 0 0 0 #ff4000;;
        }
        a {
            color: #ff4000;
            font-family: 'Poppins', sans-serif;
            font-size: 27px;
            font-weight: 700;
            line-height: 1.5;
            text-decoration: none;
        }
        body {
          display: grid;
        }

마우스 호버 전:

마우스 호버 후:

마우스 호버 시 무지개 밑줄

이 효과는 마우스 오버 시 텍스트에 여러 색상의 밑줄을 추가합니다.

linear-gradient 의사 클래스를 사용하여 다양한 색상 간의 부드러운 전환을 만듭니다.
:hover 의사 클래스를 사용하여 효과를 적용합니다.
호버 효과를 적용할 링크 요소를 만듭니다.

다음은 마우스 호버 시 무지개 밑줄을 구현하는 샘플 코드입니다.

HTML 파일:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
      </head>
      <body>
          <div>
              <p>이것은 <a href="#">무지개</a> 호버 효과입니다.</p>
          </div>
      </body>
      </html>

CSS 파일:

        p {
            max-width: 800px;
            margin: auto 15%;
            line-height: 1.1;
            font-size: 78px;
            font-weight: 700;
            letter-spacing: .0125em;
            color: black;
        }
        a {
            display: inline-block;
            position: relative;
            text-decoration: none;
            color: inherit;
            z-index: 1;
        }
        a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: .07em;
            height: .1em;
            width: 100%;
            background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
            z-index: -1;
            transition: height .25s cubic-bezier(.6,0,.4,1);
        }
        a:hover::after {
            height: .2em;
        }
        p {
            font-size: 58px;
        }

마우스 호버 전:

마우스 호버 후:

마우스 호버 시 텍스트 스와핑

텍스트 스와핑은 사용자가 특정 요소 위로 마우스를 가져갈 때 해당 요소의 텍스트가 다른 콘텐츠나 텍스트로 바뀌는 효과입니다. 예를 들어, 웹사이트에 "댓글" 링크가 있는 경우 마우스를 올리면 링크 텍스트가 "댓글 추가"와 같이 변경될 수 있습니다.

마우스 호버 시 텍스트 스와핑을 구현하려면 다음 요소를 사용합니다.

::before 및 ::after 가상 요소: 호버 후 교체될 텍스트에 대한 별도의 요소를 만듭니다.
:hover 의사 요소: 호버 시 콘텐츠의 위치 또는 가시성을 변경합니다.

다음은 이 효과를 구현하는 방법을 보여주는 예시입니다.

HTML 파일:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
        </head>
        <body>
            <button><span>99개의 댓글</span></button>
        </body>
        </html>

CSS 파일:

        button { width: 10em }
        button { height: 3em }
        button:hover span { display: none }
        button:hover:before { content: "댓글 추가" }

마우스 호버 전:

마우스 호버 후:

호버 효과를 활용한 뛰어난 웹사이트 예시

영감을 얻기 위해 다음 웹사이트들을 참고해 보세요.

#1. 캔바(Canva)

캔바는 디자인 초보자도 쉽게 멋진 디자인을 만들 수 있게 도와주는 디자인 플랫폼입니다. 캔바 웹사이트는 홈페이지부터 제품 페이지까지 다양한 곳에서 놀라운 호버 효과를 보여줍니다. 홈페이지에서는 마우스 호버 시 어둡고 흐릿한 배경이 사라지면서 이미지가 나타납니다. 다른 디자인 템플릿을 선택할 때도 호버 효과가 적용됩니다.

#2. 하우스(Haus)

하우스는 밑줄 효과, 텍스트 스와핑, 배경색 변경 등 다양한 호버 효과를 효과적으로 활용한 좋은 예시입니다.

#3. 메인웍스(Mainworks)

메인웍스는 애니메이션과 전환 효과를 모두 활용하여 사용자 경험을 향상시켰습니다. 마우스 호버 시 텍스트 교체, 텍스트 색상 변경, 텍스트 및 이미지 확대/축소 효과 등을 보여줍니다.

결론

웹사이트에 추가할 호버 효과는 웹사이트의 종류, 기술, 사용자의 취향 및 선호도에 따라 달라집니다. 예술이나 쿠폰 플랫폼과 같은 일부 웹사이트는 화려한 호버 효과를 선호할 수 있습니다. 반면에 법률 또는 의료 웹사이트는 최소한의 호버 효과를 선택할 수 있습니다. 따라서 여러분의 웹사이트에 적합한 효과를 파악해야 합니다. 하지만 이러한 효과가 브랜드 색상과 조화를 이루도록 해야 합니다. CSS 기술을 향상시키기 위해 최고의 CSS 리소스를 확인해 보세요.