Django 포스팅
Doyeon0430 | 2023년 08월 20일
이번시간에는 애니메이션 효과가 적용 된 버튼 디자인을 소개하겠습니다.
CSS에 box-shadow를 기반으로 배경색과 아웃라인 효과 등을 넣어봤습니다.
transition을 사용해 0.5초에 지연시간을 설정했습니다.
또한 hover 기능으로 버튼에 마우스가 올라가면 작동하는 방식입니다.
그럼 지금부터 다양한 디자인 모음을 확인하겠습니다.
첫 번째 디자인은 버튼 색상과 배경 색상을 통일시킨 애니메이션 효과입니다.
background-color를 사용해 배경색과 일치시키고 box-shadow와 color로 보라색을 넣어줬습니다.
두 번째 디자인은 버튼이 위로 뜨는 애니메이션 효과입니다.
top과 left에 입력 값을 넣어 버튼 위치를 설정하고 box-shadow에 노랑 계열 그림자를 추가했습니다.
세 번째 디자인은 버튼 색상이 서서히 나타나는 애니메이션 효과입니다.
background-color와 box-shadow에 색상을 통일시키며 디자인을 적용했습니다.
네 번째 디자인은 아웃라인에 테두리가 생기는 애니메이션 효과입니다.
outline-offset으로 적당한 간격을 주고 outline을 넣어 테두리를 생성했습니다.
글을 마치며 애니메이션이 적용 된 다양한 버튼 디자인을 알아봤습니다.
댓글 (0)
간편 댓글 작성
