버튼 클릭 효과 애니메이션 처리

css 버튼 클릭 효과

 

 

PC에서는 버튼을 클릭 시 크게 효과가 없지만 모바일에서는 터치로 클릭하였을 때 손가락이 터치했다는 걸 사용자에게 인지하기 위에서 버튼 클릭 시 살짝 버튼이 아래로 가게 하는 기법이 있어서 UX의 만족도를 조금 더 높여 줄 수 있는 방법이다

 

각 CSS 프레임워크 별 버튼 비교

Normal, Bootstrap, Material, Flat, Element UI 등등이 대표적입니다
가볍게 코딩을 해보았습니다

 

버튼 클릭 효과

위의 예제에서 마지막에 custom button을 보면 기존의 프레임워크와의 클릭이 조금 다르다는 것을 확인할 수 있습니다.

클릭(active)을 했을 때만 transform: translateY(4px); 를 추가하여 클릭한 효과를 줄 수 있습니다.

.custom:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

2020/04/25 - [프로그래밍/CSS] - 반응형 웹 CSS 미디어쿼리 media query 템플릿 세팅

반응형 웹 CSS 미디어쿼리 media query 템플릿 세팅