버튼 클릭 효과 애니메이션 처리
PC에서는 버튼을 클릭 시 크게 효과가 없지만 모바일에서는 터치로 클릭하였을 때 손가락이 터치했다는 걸 사용자에게 인지하기 위에서 버튼 클릭 시 살짝 버튼이 아래로 가게 하는 기법이 있어서 UX의 만족도를 조금 더 높여 줄 수 있는 방법이다 각 CSS 프레임워크 별 버튼 비교 Normal, Bootstrap, Material, Flat, Element UI 등등이 대표적입니다 가볍게 코딩을 해보았습니다 버튼 클릭 효과 위의 예제에서 마지막에 custom button을 보면 기존의 프레임워크와의 클릭이 조금 다르다는 것을 확인할 수 있습니다. 클릭(active)을 했을 때만 transform: translateY(4px); 를 추가하여 클릭한 효과를 줄 수 있습니다. .custom:active { back..
Web 프로그래밍/CSS
2020. 4. 25. 17:05