CSS를 사용하여 애니메이션 효과를 페이지의 버튼에 추가하는 방법을 살펴봅니다.
애니메이션 웹 버튼 만들기

CSS의 transition 속성을 사용하면 심플하고 세련된 애니메이션 효과를 페이지에 추가할 수 있습니다. 페이지의 사용자 경험을 향상시키는 방법 중 하나는 사용자가 사이트를 탐색할 때 피드백을 제시하는 간단한 애니메이션을 추가하는 것입니다. 일반적인 효과로 버튼 또는 버튼 텍스트의 색상, 테두리, 크기에 대한 변경이 있습니다. 이 튜토리얼에서는 transition 속성에 사용되는 CSS를 중점적으로 소개합니다. 단계를 따라 하려면 프로젝트 파일을 다운로드하여 코드 전체를 표시합니다.

이 튜토리얼에서는 CSS 전환을 활용하는 방법의 일부만 다룹니다. 프로젝트 파일을 다운로드하여 직접 사용해 보시기 바랍니다.

전환 속성의 구조

CSS로 버튼과 같은 객체에 전환 효과를 적용하려면 두 가지 스타일이 필요합니다. 하나는 일반 상태의 버튼 스타일이고 다른 하나는 마우스 오버 상태(사용자가 버튼 위로 마우스를 가져갈 때)의 버튼 스타일입니다. 

이 예제에서 일반 상태의 버튼 스타일은 CSS id 선택기(#button1)로 정의되어 있습니다. 마우스 오버 상태의 버튼 스타일은 동일한 버튼의 유사 선택기(#button1:hover)로 정의되어 있습니다. 유사 선택기는 사용자가 링크를 선택하거나 링크 위로 마우스를 가져갈 때 등 특정 상태의 요소 스타일을 정의합니다.

이 예제에서는 배경색이 파란색에서 빨간색으로 바뀝니다. 전환을 정의하는 데 다음과 같은 4개의 transition 속성을 포함시킵니다.

  • transition-property: 변경할 CSS 속성 지정(background)
  • transition-duration: 전환에 걸리는 시간 지정(0.3s)
  • transition-timing-function: 시간의 경과에 따라 전환 효과의 속도 변경 여부 지정(ease)
  • transition-delay: 전환이 시작되기 전의 시간 지정(0s)
전환 효과 설정
전환 효과 설정
실습 파일 열기
실습 파일 열기

시작하기 전에

Dreamweaver에서 create-animated-website-buttons.html을 열고 분할 뷰에서 style.css를 표시합니다.

색상 전환

사용자가 버튼 위로 마우스를 가져가면 버튼 색상이 빨간색에서 파란색으로 바뀌도록 CSS 스타일을 설정합니다.

일반 상태의 버튼에 대한 CSS에서 background 속성을 파란색으로 설정합니다. 동일한 CSS 규칙의 transition-property는 일부 액션에 의해 상태가 변경되면 background 색상 속성이 변경되는 것을 보여줍니다. 나머지 transition 속성은 변화의 속도와 매끄러운 정도를 결정합니다.

  • transition-timing-function: ease;를 적용하면 효과가 느리게 시작해서 천천히 종료됩니다.

유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 배경색이 빨간색으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.

CSS(일반)

#button1 {
  ...
  background:#ADD7F4;
  transition-property: background;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS(마우스 오버)

#button1:hover {
  background:#EA575B;
}

색상 전환
색상 전환

테두리 및 텍스트 색상 전환

버튼의 테두리와 텍스트 색상이 변경되도록 CSS 스타일을 설정합니다.

일반 상태의 버튼에 대한 CSS에서 border-color 속성을 밝은 파란색으로 설정하고 텍스트의 color 속성을 흰색으로 설정합니다. 동일한 CSS 규칙의 transition-property는 일부 액션에 의해 상태가 변경되면 border-color 속성과 텍스트의 color 속성이 변경되는 것을 보여줍니다. 나머지 transition 속성은 변화의 속도와 매끄러운 정도를 결정합니다.

  • transition-timing-function: linear;를 적용하면 효과가 처음부터 끝까지 동일한 속도를 유지합니다.

유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 테두리 색상과 텍스트의 색상이 어두운 파란색으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.

CSS(일반)

#button2 {
  ...
  border-color: #7A97B2;
  color: #f4f4f4;
  transition-property: border-color, color;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0;
}


CSS(마우스 오버)

button2:hover {
  border-color: #204F81;
  color: #183B61;
}

테두리 및 텍스트의 색상 전환
테두리 및 텍스트의 색상 전환

크기 전환

버튼 크기가 변경되도록 CSS 스타일을 설정합니다.

일반 상태의 버튼에 대한 CSS에서 width 속성을 400px, height 속성을 100px, line-height 속성을 60px로 설정합니다. 동일한 CSS 규칙의 transition-property는 일부 액션에 의해 상태가 변경되면 width, height, line-height 속성이 변경되는 것을 보여줍니다.

유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 , 높이, 행 높이가 더 커지고 마우스 오버 상태를 호출하도록 지정합니다.

CSS(일반)

#button3 {
  ...
  width: 400px;
  height: 100px;
  line-height: 60px;
  transition-property:
       width, height, line-height;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS(마우스 오버)

#button3:hover {
  width: 420px;
  height: 120px;
  line-height: 80px;
}

크기 전환
크기 전환

배경 및 텍스트 색상 변경

버튼의 배경 및 텍스트 색상이 바뀌도록 CSS 스타일을 설정합니다.

일반 상태의 버튼에 대한 CSS에서 background-color 속성을 흰색으로 설정하고 텍스트의 color 속성을 회색으로 설정합니다. 동일한 CSS 규칙의 transition-property는 일부 액션에 의해 상태가 변경되면 background-color 속성과 텍스트의 color 속성이 변경되는 것을 보여줍니다.

유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 background-color 속성과 텍스트의 color 속성이 반대 값으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.

CSS(일반)

#button4 {
  background-color:#f4f4f4;
  color: #73746B;
  transition-property:
     background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS(마우스 오버)

#button4:hover {
  background-color:#73746B;
  color: #f4f4f4;
}

배경 및 텍스트 색상 변경
배경 및 텍스트 색상 변경
브라우저에서 전환 미리 보기
브라우저에서 전환 미리 보기

브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 전환 효과를 확인합니다.

변경 내용을 확인하려면 먼저 파일을 저장합니다.

04/11/2018
이 페이지가 도움이 되었습니까?