CSS hover시 채워지는 메뉴 버튼 구현하기

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 (@woongwoongs) on CodePen.

.{classname}{}

• 누르기 전 기본 스타일

 

 

.{classname}::before{}

• hover시 원하는 target이 들어가야 함. (누르기 전 스타일)
• transition이 들어가야 함
• left, bottom 사용하기 때문에 position 이 중요한 변수

 

 

.{classname}:hover::before{}

• hover했을 때 원하는 target (누른 후 스타일)

 

 

.{classname}:hover{}

• 누르고 난 다음 유지될 스타일

 

---

Reference

출처는 여기!!

 

6 Creative Ideas for CSS Link Hover Effects | CSS-Tricks