CSS 버튼 애니메이션 만들기

폼에 사용하는 버튼들 중 가장 대표적인 것은 "저장", "취소" 같은 선택 버튼입니다.

밋밋한 버튼보다는 마우스 호버(hover)시에 버튼이 활성화 되는 효과를 주면 보기에도 좋고, 사용자에게 누를 수 있는 버튼이라는 것을 알려주는 안내 역할을 하기도 합니다.

간단한 트랜지션 애니메이션 효과로 마우스호버 효과를 적용할 수 있습니다.

먼저 버튼 2개를 만듭니다.

<div class="btngroup">
    <button class="btn save">저장</button>
    <button class="btn cancel">취소</button>
</div>

".btn" 클래스로 버튼 디자인을 입힙니다.

.btn{
    background-color: #f8f8f8;
    color: #888;
    border: 1px solid #e8e8e8;
    font-size: 1.125em;
    letter-spacing: 0px;
    padding: 10px 60px;
    cursor: pointer;
    display: inline-block;
    margin: 3px 10px; 
}

완성된 버튼은 다음처럼 보이게 됩니다.

버튼은 마우스 호버를 해도 커서가 포인터로 바뀌는 것 말고는 다른 효과는 없습니다.

마우스 호버를 하면 버튼 배경색과 글자색이 바뀌도록 ":hover" 가상 클래스를 정의합니다.

.btn:hover{
    background: rgba(96,96,0,0.5);
    color: white;
}

이제 마우스를 버튼 위로 가져가면 배경색과 글자색이 바뀌면서 버튼이 활성화 되는 것 같은 느낌이 나게 됩니다.

마우스 호버가 되면 색상이 서서히 적용되면서 애니메이션 되는 듯한 효과를 부여합니다.

시간이 지나면서 적용되는 효과를 위해 트랜지션(transition) 효과가 "0.5초" 동안 발생하도록 합니다.

마우스 호버될 때, 그리고 마우스 커서가 버튼 밖으로 나갈 때 모두 적용되도록 ".btn" 클래스와 ".btn:hover" 클래스 모두에 트랜지션 효과를 추가(transition: all 0.5s;)해야 합니다.

.btn{
    background-color: #f8f8f8;
    color: #888;
    border: 1px solid #e8e8e8;
    font-size: 1.125em;
    letter-spacing: 0px;
    padding: 10px 60px;
    cursor: pointer;
    display: inline-block;
    margin: 3px 10px;
    transition: all 0.5s;    
}
.btn:hover{
    background: rgba(96,96,0,0.5);
    color: white;
    transition: all 0.5s;
}

여기까지는 기본적인 색상 애니메이션 효과를 주는 효과이고, 조금 더 움직임이 있는 커튼 애니메이션 버튼을 만들어 보겠습니다.

먼저 반투명(또는 투명) 버튼 배경 밑으로 커튼 애니메이션이 보이도록 해야 하기 때문에 버튼 배경색을 반투명(또는 투명)으로 변경합니다. 

그리고 버튼의 위치 속성을 "position: relative;" 로 지정해서 절대 좌표로 동작하는 커튼 애니메이션이 버튼 영역안에 위치하도록 해야 합니다.

.btn{
    background-color: rgba(0,0,0,0.05);
    color: #888;
    border: 1px solid #e8e8e8;
    font-size: 1.125em;
    letter-spacing: 0px;
    padding: 10px 60px;
    cursor: pointer;
    display: inline-block;
    margin: 3px 10px;
    transition: all 0.5s;
    position: relative;
}
.btn:hover{
    color: white;
    transition: all 0.5s;    
}

만들어진 버튼은 마우스 호버일 때의 배경색을 제거했기 때문에 글자색만 흰색으로 변하는 상태가 됩니다.

이제 거의 투명한 반투명 배경으로 커튼 애니메이션을 추가합니다.

가상클래스로 가상 요소를 하나 만들어 버튼 배경에 위치시킵니다. 높이 값이 0이기 때문에 영역을 차지하지 않으며, 위치를 "top: 0; left: 0;" 속성으로 강제 지정했기 때문에 버튼 상단에 고정되어 위치하게 됩니다.

.btn:after {
    position: absolute;
    content: '';
    background: #a00;
    z-index: -1;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    transition: all 0.5s;
}

버튼 위에 마우스 호버 되었을 때 가상 클래스의 높이를 "100%"로 지정해서 버튼 영역이 밑으로 채색되는 느낌이 나도록 ".btn:hover:after" 클래스 속성을 추가합니다.

.btn:hover:after{
    height: 100%;
}

가상 요소에 호버 속성을 적용할 때 순서에 주의해야 합니다.

가상 요소의 높이가 "0" 이기 때문에 마우스 버튼에 마우스 커서가 위치해도 가상 요소에는 마우스 호버가 된 것이 아니기 때문에 마우스 호버 이벤트가 발생하지 않습니다. ".btn:after:hover" 와 같이 클래스를 작성하면 호버 이벤트가 발생하지 않기 때문에 높이 값 변경이 적용되지 않습니다.

따라서 버튼에 마우스 호버가 되면 가상 요소의 높이를 변경하는 순서로 작성(".btn:hover:after")을 해야 마우스 호버에 따른 가상 요소의 높이 변경이 적용됩니다.

커튼 방향은 너비와 높이 값을 조정해서 다음과 같이 커튼 방향을 가로로 변경할 수도 있습니다.

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.5s;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #a00;
}
.btn:hover:after{
    width: 100%;
}

주의할 점이 있는데, 가로 방향으로 커튼 애니메이션을 적용하면 애니메이션 후에 왼쪽 끝에 라인이 남는 현상이 생기는 경우가 있습니다. 버튼에 따라서는 보이기도 하고 안보이기도 하는데,

이 문제를 해결하려면 버튼 속성에 "overflow: hidden;" 추가해주면 됩니다. 버튼 영역 외곽(경계선)에 걸쳐 가상 요소가 남아있는 일종의 버그이며, 일부 웹 브라우저(크로미움 엔진 기반 구글 크롬, 마이크로소프트 신형 엣지)에서만 발생하는 현상입니다.

파이어폭스에서는 "overflow: hidden;" 속성과 무관하게 발생하지 않습니다.

.btn{
    background-color: rgba(0,0,0,0.05);
    color: #888;
    border: 0;
    font-size: 1.125em;
    letter-spacing: 0px;
    padding: 10px 60px;
    cursor: pointer;
    display: inline-block;
    margin: 3px 10px;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
}