CSS〃글자 밑 호버 이펙트 (Bottom Border Hover Effect)

웹사이트의 메뉴나 버튼에 마우스를 올렸을때 효과를 주기 위한 이펙트 중에 하나로 Border bottom에 효과를 주는 방법이 있는데요. bottom에 solid 효과에 색만 잘 골라서 선택해주면 사이트가 좀 달라집니다.

hover effect도 글자 가운데에서부터 퍼져 나갈지, 왼쪽에서부터 퍼질지, 오른쪽에서 퍼질지에 따라 사용 방법이 다른데 좋은 소스가 있어 저장 용도로 가져왔습니다.

◇ 소스코드 

간단한 CSS나 자바스크립트는 앞으로 코드펜에 저장 후 가져오는 방법이 가독성이 좋아보이네요. 이제는 이 방법을 사용해서 블로그 포스팅 하겠습니다.