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

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);
}

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

반응형 웹 반응형 웹은 PC, 태블릿, 모바일(가로, 세로) 등을 모두 지원할 수 있게끔 설정 해주는 템플릿을 의믜한다. 일반적으로는 CSS의 미디어쿼리를 이용하여 분기처리를 하지만 적응형 웹으��

realmojo.tistory.com