CSS 색 채워지는 효과
-
CSS hover시 채워지는 메뉴 버튼 구현하기Web-app/CSS 2023. 9. 24. 14:49
React에서 Main Navigation을 구현 하던 중, menu 버튼에 마우스를 대면 색깔이 채워지는 효과를 만들고 싶었읍니다. React에서는 a태그 대신 NavLink를 넣으면 css에서 자동으로 a태그로 인식이 되어 사용하믄 됩니당 1. box shadow + inset을 활용한 구현 box shadow를 transition하면서 색을 채우는 방식, 어디서 부터 shadow를 채울지 지정해주고 shadow의 색을 원하는 색으로 채워줍니다. See the Pen a css hover example by woongwoongs (@woongwoongs) on CodePen. 2. css before 를 사용한 구현 See the Pen Untitled by woongwoongs (@woongwoon..