CSS로 버튼 애니메이션 효과 주기


이 글에서는 일러스트레이터로 그림을 그리거나 포토샵을 켜서 이미지를 편집하는 번거로운 일 없이도 코드 몇 줄 만으로 애니메이션 버튼을 만드는 방법을 알아보겠습니다.


결과물


See the Pen button #0 by moksunung (@moksunung) on CodePen.


제 블로그 스킨에서도 방명록과 댓글 글쓰기 버튼이 저 디자인으로 되어있는데요. 원리는 간단합니다.

우선 버튼 박스를 만들고 그 안에 작았다가 커지는 클릭 박스 1개, 위로 움직일 박스 1개, 아래로 움직일 박스 1개, 총 3개의 박스를 넣어주는 것입니다.



CLICK박스는 작았다 커지는 애니메이션 효과를 주기 위해 transform:scale() 을 사용합니다. 클릭박스는 위아래 박스 뒤에 가려져있어 기본적으로는 보이지 않고 버튼 위에 마우스 커서가 올라갔을 때에만 제대로 보여지게 하면됩니다. 그러기 위해 기본값을 작은 크기로 줄여놓고 hover 일 때 본래 크기로 돌아오게 코딩합니다. 아래와 같이요



상단박스와 하단박스는 버튼 크기의 절반 높이로 코딩합니다. 

그리고 상단과 하단의 박스를  위쪽과 아래쪽에 위치시켜주기 위해 button의 position을 relative로 하고, 상단 하단 박스 position을 absolute로 합니다. 상단박스의 위치는 top:0 left:0;, 하단박스의 위치는 bottom:0; left:0; 으로 하면 상단 하단 박스가 제자리에 위치하게 됩니다.


이제 버튼의 텍스트가 절반씩 잘려서 각각 위아래로 이동하게 해야하는데, 상단과 하단의 <span></span>안에 텍스트를 직접 입력하면 두 곳 모두 글자가 나타나기 때문에 텍스트가 하나로 보이지 않고 2줄로 나타나게되는데요. 그래서 <span></span> 사이에 텍스트를 입력하는 대신 가상선택자 ::before 를 사용하여 content 속성으로 텍스트를 넣어줍니다. 


그런 다음 두 박스의 텍스트가 본래 하나의 덩어리인 것 처럼 겹쳐보이게 하기 위해서, 하단박스의 ::before 애서 position:absolute; top:-15px; 하여 하단박스의 가상선택자의 위치를 위쪽으로 이동시킵니다. 이제 글자가 겹쳐 하나의 단어로 보이겠지만, 하단 박스 안에 있는 가상선택자가 하단 박스 위쪽으로 넘치게 되었으므로, 하단박스에 overflow:hidden; 하여 넘치는 내용물을 숨기도록 합니다. 

설명이 복잡하니 아래 코드를 참고하세요.



자 그럼 이제 버튼의 구성과 디자인은 다 된 것입니다. 버튼을 마우스오버 했을 때 애니메이션이 작동하도록 transition 을 걸어주고,  버튼(.btn)을 마우스오버 할 때(:hover) 안에 있는 상단박스(.top)와 하단박스(.bottom)의 위치를 위 아래로 이동하도록 코딩해주면 끝입니다.



이 내용을 응용하면 아래처럼 다양한 애니메이션 효과로 버튼을 만들 수 있습니다.


See the Pen button #1 by moksunung (@moksunung) on CodePen.




'공부 > HTML/CSS' 카테고리의 다른 글

CSS INPUT(CHECKBOX, RADIO) 애니메이션 효과  (13) 2015.10.23
CSS 버튼 애니메이션 효과  (2) 2015.10.18