CSS 트릭으로 링크 호버를 재미있게 표현하는 방법

수많은 웹페이지에 존재하는 기존 링크는 밑줄, 점선, 색상 등등 몇 가지로 사용자의 시선을 끄는 획일적인 형태를 취하고 있다.

링크는 해당 페이지에서 대상 페이지나 구매 페이지로 연결하게 되므로 기능적인 측면에서 유용하여 방문자의 클릭을 유발하기 위해 시인성이 높고 두드러지게 하는 것이 좋다.

정적인 기본 링크에 마우스 오버 효과를 독특하게 구현하여 동적인 링크를 제공하면 사용자의 시선을 사로잡아 클릭 빈도를 높일 수 있다. 그런 까닭에 웹 개발자는 다양한 방법으로 마우스 오버 효과를 구현하는 방법을 연구해 왔다.

오늘은 CSS 트릭을 이용해 더욱 생동감이 넘치고 눈길을 사로잡을 수 있는 마우스 오버 효과인 호버 상태를 독특하게 표현하는 방법을 알아 본다.

SVG 태그 소스를 활용 CSS 'background-image' 속성에 SVG를 사용하는 방법이다.

이 CSS 트릭을 이용해 링크의 호버상태를 파형, 배경효과, 아웃라인, 그라데이션, Raised Text Effect, 글꼴 전환, 턴업 효과 등 다양하게 구현할 수 있다.

CSS 코드 몇 줄을 추가해서 웹페이지 링크를 흥미롭고 재밌게 구현하는 것이 어렵지 않고 이를 통해 사용자에게 색다른 경험을 줄 수 있다는 점에서 신선한 변화가 될 것이다.

자세한 구현 방법은 다음 링크를 참고하면 된다. [CSS Trick 소스 보기 : Having fun with link hover effects ]