애니메이션 버튼 만들기

CSS 애니메이션을 활용하여 버튼에 다양한 효과를 주는 것은 사용자 경험을 향상시키고 웹 페이지의 인터랙티브 요소를 강화하는 좋은 방법입니다. 여기서는 버튼에 호버(hover) 및 활성(active) 상태에서 애니메이션 효과를 주는 방법을 자세히 살펴보겠습니다.

1. button 스타일 지정

background-color, border, color, padding 등을 사용해서 버튼의 평상 시 상태의 스타일을 작성합니다.

버튼의 기본 스타일

.button {
    background-color: #006769; /* 버튼의 기본 배경색 */
    border: none; /* 테두리 없음 */
    color: white; /* 텍스트 색상 */
    padding: 15px 20px; /* 패딩: 상하 15px, 좌우 20px */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 밑줄 없음 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
    font-size: 16px; /* 텍스트 크기 */
    transition:
        background-color 0.5s,
        transform 0.5s; /* 배경색과 변형에 대한 전환 효과 0.5초 설정 */
}

2. button의 hover (커서가 올라가 있는 상태)

 

커서를 올리면 어떻게 변할지 지정합니다.

background-color 속성으로 버튼의 배경을 색을, color 속성으로 텍스트 색을 바꿔줍니다.

transform 속성에 scale(1.1) 값을 넣어 크기를 110%로 확대해줍니다.

(scale 값은 일반적으로 소수점 두번째까지만 사용합니다. 소수점에 제한은 없지만, 매우 세밀한 소수점자리는 육안으로 거의 차이가 없기 때문에)

hover 버튼의 스타일

또한 border 속성에 double 값을 넣어 이중 테두리를 만들고, border-color은 빨강색인 red로 기입합니다.

.button:hover {
    background-color: #9dde8b; /* 호버 상태에서 배경색 변경 */
    color: #006769; /* 호버 상태에서 텍스트 색상 변경 */
    transform: scale(1.1); /* 호버 상태에서 크기 110% 확대 */
    border: double; /* 이중 테두리 */
    border-color: red; /* 빨간 테두리 */
}

 

3. button의 active (버튼 클릭 시 상태)

버튼을 클릭하면 어떻게 변할지 지정합니다.

background-color 속성으로 버튼의 배경을 색을, color 속성으로 텍스트 색을 바꿔줍니다.

테두리 색은 hover 스타일 그대로 두고 싶기에 따로 작성하지 않았습니다.

다만, 버튼의 크기가 살짝 줄어들면 좋을거 같아 transform 속성에 scale(1.05) 값을 넣어 크기를 105%로 살짝 줄여줍니다.

active 버튼의 스타일

.button:active {
    background-color: #e6ff94; /* 클릭 상태에서 배경색 변경 */
    color: #40a578; /* 클릭 상태에서 텍스트 색상 변경 */
    transform: scale(1.05); /* 클릭 상태에서 크기 살짝 축소 */
}

 

완성된 버튼