CSS 버튼 애니메이션 효과 예제입니다. transform, box-shadow, transition을 활용해 마우스 호버 시 부드럽게 떠오르는 효과를 줄 수 있습니다. 특히 아이콘 내비게이션에 적용하면 UI가 훨씬 생동감 있어집니다.
CSS 버튼 애니메이션 효과 실행 결과
해당 애니메이션 효과는 마우스가 버튼 위로 올라갈 때(hover), 버튼에 키보드 또는 마우스로 초점이 잡힐 때(focus), 버튼을 키보드나 마우스 선택 또는 클릭할 때(active) 버튼이 아래에서 위로 이동하면서 버튼 그림자가 짙어지는 효과입니다.
CSS 버튼 애니메이션 효과에 대해서 코드를 보면서 설명 드리겠습니다.
HTML 예제코드
<button type="button" class="ani-effect-btn">애니메이션 버튼</button>CSS 기본 예제코드
.ani-effect-btn {
display: inline-block;
margin: 0;
padding: 15px 30px;
border: 0;
border-radius: 15px;
font-size: 1.5rem;
color: #333;
background-color: #fff;
transition: all .25s;
box-shadow: 0 3px 10px rgba(155, 155, 155, 30%);
}CSS 효과 예제코드
.ani-effect-btn:hover,
.ani-effect-btn:focus,
.ani-effect-btn:active {
transform: translateY(-5px);
box-shadow: 0 3px 10px rgba(155, 155, 155, 70%);
background-color: #fff;
}- transform: translateY(-5px) : 위로 5픽셀 만큼 떠오르게 하는 효과
- box-shadow: 0 3px 10px rgba(155, 155, 155, 70%) : 버튼의 그림자 효과를 짙어지게 하는 효과
- hover, focus, active : 마우스 오버, 키보드 포커스, 클릭 상태 모두일때 효과가 적용되게
마무리
- 네비게이션 아이콘, 카드형 이미지, 프로필 이미지에 주로 사용
- border-radius 로 원형, 정사각형 등 다양한 연출도 가능
- 글자의 색상이나 글자가 이동하게 처리하는 것도 가능
- CSS 코드로 간단히 다지인의 완성도를 높일 수 있음.
- scale의 회전 효과도 줄 수 있음.
- opacity의 투명 효과도 줄 수 있음.
- 다양한 효과가 가능함.