Hover 버튼을 폼 나게 만들기 (transition + transform 적용)

이전 포스팅에서 transition과 transform에 대해서 정리하고 살펴보았습니다. 공부한 건 바로 써먹어 봐야겠죠?

웹 사이트에서 매우 흔하게 볼 수 있는 hover에 반응하는 hover(호버) 버튼을 만들어보려고 합니다. 한국에서는 롤오버 버튼이라고도 많이 불리는 것 같습니다.

실무에서는 대체적으로 hover button 혹은 roll-over button의 경우 적용된 폰트의 색상이나 백그라운드 컬러 정도를 변하게 하는 형태를 주로 사용하게 되는데요, 이번 포스팅에서는 좀 더 과감하게, transition과 transform 속성을 이용하여 만들어보면서 공부해보는 시간을 가져보도록 하겠습니다.

예제코드

아래 예제 코드를 사용해서 멋진 버튼으로 함께 만들어 나가 보도록 해봅니다.

<!DOCTYPE html>
<html lang="ko">
<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>Hover Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <button>Hover Button</button>
</body>
</html>

HTML 태그를 이용해서 button을 하나 만들었고, CSS의 flex 속성을 이용해서 문서의 중앙에 버튼을 배치했습니다.

:hover 되기 이전의 스타일

마우스 롤오버가 되기 이전, 즉 hover 상태 이전에 대한 CSS 스타일링을 해주도록 합니다. 심플하고 밋밋한 멋 없는 버튼 보다는 아무래도 예쁘게 생긴 버튼이 사용자들에게도 좋겠죠?

CSS에 아래 코드를 추가해줍니다. 한줄씩 추가해보면서, 브라우저 상에서 버튼이 어떻게 변하는 지 한 스탭씩 확인을 해보면서 진행하면 공부에 도움이 되실 겁니다.

       button {
            background: none;
            color: orange;
            border: 2px solid;
            padding: 1em 2em;
            font-size: 1em;
        }

짠, 오렌지색 버튼이 만들어졌습니다.

:hover 된 이후의 스타일

버튼 위에 마우스를 올린 경우에 보여지게 될 형태로 CSS를 이용해서 스타일링을 해주도록 합니다. CSS에 아래 코드를 추가해줍니다.

        button:hover {
            border-color: orange;
            color: white;
            box-shadow: 0 0.5em 0.5em -0.4em yellow;
        }

마우스를 롤오버, 즉 :hover 상태인 경우, 버튼의 색상이 위와 같이 변경될 것입니다. box-shadow 속성을 적용하니, 네온 불빛 같은 느낌도 살짝 드는 것 같습니다.

참고로, box-show에서 사용하는 값들의 의미는 다음과 같습니다. px 단위 등으로 변경해보면서 어떻게 변경되는 지 체크해보시기 바랍니다.

box-shadow : offset-x | offset-y | blur-radius | spread-radius | color;

박스 쉐도우 : x오프셋 | y오프셋 | 블러효과 반지름 | 퍼짐효과 반지름 | 컬러값

버튼을 위로 움직여 보자

버튼에 움직이는 효과를 주기 위해서는, 위치가 변하게 되므로 margin 속성을 사용하는 것을 생각해볼 수도 있겠지만, transform 속성을 이용하는 것이 훨씬 더 좋습니다. 왜냐구요? 그러라구 만든 속성이 트랜스폼이니까요.^^;

CSS에 transform 속성을 추가로 작성해보도록 합니다. 버튼을 상단으로 움직이기 위해 -10px로 음수값을 주었습니다.

       button:hover {
            border-color: orange;
            color: white;
            box-shadow: 0 0.5em 0.5em -0.4em yellow;
            transform: translateY(-10px);
        }

버튼에 마우스를 올려보면(hover) 버튼이 움직이는 것을 확인할 수 있습니다. 그런데 움직임이 좀 거칠게 느껴지죠?

부드럽게~ 움직임이 일어나면 좋겠다는 생각이 들 때는 어떻게 해야 할까요? 맞습니다!

부드러운 움직임을 위해 Transition을 적용

transition 속성을 이용하면 엘리먼트들에 대한 움직임을 부드럽고 자연스럽게 연출할 수 있다고 했습니다. 다만, transition 속성은 button:hover에 주는 것이 아니라, button에 적용해 주어야 합니다.

      button {
            background: none;
            color: orange;
            border: 2px solid;
            padding: 1em 2em;
            font-size: 1em;
            transition: all 0.5s; /* 트랜지션은 버튼에 적용 */
        }
        
        button:hover {
            border-color: orange;
            color: white;
            box-shadow: 0 0.5em 0.5em -0.4em yellow;
            transform: translateY(-10px);
        }

마우스를 버튼 위로 올려보면, 버튼이 부드럽게 움직이는 것을 볼 수 있습니다. transition 속성을 부여해주니 움직임이 확실히 좀 더 자연스러워 보입니다.

transition에 적용한 수치들도 자유롭게 변경해보면서, 동작 시간을 조절해보면서 가장 좋아 보이는 동작방식으로 만들어보시기 바랍니다. 저는 transform에 scale()을 추가해서 버튼이 커지도록 한번 만들어보았습니다.

      button:hover {
            border-color: orange;
            color: white;
            box-shadow: 0 0.5em 0.5em -0.4em yellow;
            transform: translateY(-10px) scale(120%);
            cursor: pointer; /* 마우스 포인터를 손가락 모양으로 만들기 */
        }

마우스 포인터를 손가락 모양으로 만들기

버튼 위에 마우스를 올렸을 때, 마우스 포인터 모양을 손가락 형태로 만들어 보도록 합니다. 이건 뭐 필수가 아닌 부수적인 형태의 기술이긴 하지만 이참에 보너스로 알아두도록 해보겠습니다.

방법은 매우 간단합니다.

      button:hover {
            border-color: orange;
            color: white;
            box-shadow: 0 0.5em 0.5em -0.4em yellow;
            transform: translateY(-10px);
            cursor: pointer; /* 마우스 포인터를 손가락 모양으로 만들기 */
        }

마치며

마우스 오버(:hover) 형태는 웹문서에서 매우 빈번하게 사용되는 방식입니다. 웹문서의 태생 목적 자체가 hyper-link를 위한 것이기 때문이기도 하겠죠. 어디론가 다른 정보로 링크가 되게 하려면, 링크가 되어 있다는 사실을 사용자들에게 알려주기 위해서 보통은 :hover 상태를 잘 눈에 띄도록 다르게 스타일링 하는 것이 일반적입니다.

특히나 이번 예제에서는 transition과 transform 속성을 사용하여, 버튼이 좀 더 자연스럽고 다이나믹 하게 움직일 수 있도록 만들어 보았습니다. 이제 멋지게 응용하는 것은 모두 여러분의 몫입니다.^^

즐거운 코딩생활, 즐코딩.

KINcoding.

저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점 (0)	2023.04.06
background 다채로운 기능 한 눈에 살펴보기 (0)	2023.04.05
Transform - rotate(), scale(), translate(), skew() (0)	2023.03.29
Interactive의 시작, transition 속성 2/2 - timing function (0)	2023.03.24
Interactive의 시작, transition 속성 1/2 - duration, delay (0)	2023.03.23

즐코딩 - KINcoding

Hover 버튼을 폼 나게 만들기 (transition + transform 적용)