일반 CSS에서 호버 이미지로 링크를 만드는 법

작성자 :
  • 웹사이트 디자인
  • 업데이트 : 8 월 02, 2013

호버 란 무엇입니까? 다음에서 인용 한 정의 UWStout.edu:

'호버'는 커서를 모든 종류의 링크 위에 놓을 때 발생하는 효과입니다. 링크는 색상을 변경하거나 새 그래픽을 표시하거나 사운드 파일을 재생하여 호버에 응답하도록 코딩 할 수 있습니다.

호버 효과는 웹 유용성을 향상시키고 웹 소유자가 자신의 웹 트래픽을 지시하도록 도와줍니다. 웹 사용자가 특별한 링크에 특별한주의를 기울 이길 원할 때 좋은 호버 방법은 매력적인 호버 효과가있는 링크를 만드는 것입니다. 간단한 호버 효과 이 같은 (단순한 밑줄과 텍스트 색상 변경)은 해당 텍스트가 '클릭 가능'하며 웹 상호 작용이 향상되었음을 나타냅니다. 그러나 텍스트 색상과 스타일 (밑줄 / 오버 라인 / 굵게)을 변경하는 것은 매우 기본이며 호버로 더 많은 작업을 수행 할 수 있습니다.

이 기사에서는 호버 효과가있는 멋진 링크를 만드는 방법을 보여 드리겠습니다.

예 1 : 호버 버튼과 링크

먼저 작업 예제 (링크가 작동하는 방식을 보려면 마우스를 놓고 측면에서 아이콘 변경)를 살펴보십시오.

예 1 - 호버 버튼 이미지가있는 링크

이것은이 예제에서 빌드 될 완성 된 버전입니다.

우리는 평범한 CSS로 어떻게 만들었습니까?

버튼 이미지

1 단계에서 알 수 있듯이 두 가지 버전의 화살표 아이콘이 필요합니다. 이 예에서는 빨간색 (#CC3300)을 기본 링크 버튼으로 사용했습니다. 와 호버 효과 (#333333)가 있습니다. 이러한 버튼은 모든 이미지 편집 소프트웨어를 사용하여 쉽게 만들 수 있습니다.

이제는 붉은 색 버튼 (예 : b1.png)과 레이 색 (b2.png)이 있습니다. 이 두 이미지를 b1.png 위에 b2.png가있는 이미지 파일 하나에 병합하십시오. 이것이 링크의 최종 이미지가 될 것입니다. 이름을 짓고 (예 : x.png) 원하는 위치를 업로드하십시오 (제 경우에는 WP 템플리트 폴더에 위치 시켰습니다).

참고로 :

b1.png , b2.png , 및 x.png

CSS 코드

다음으로, CSS 코드. 기본적으로 우리가 원하는 것은 버튼을위한 공간을 만들기 위해 링크 텍스트를 약간 오른쪽으로 들여 쓰기하는 것입니다. 동시에 링크가 호버 상태 일 때 다른 이미지를 표시하십시오. 이것들은 백그라운드 포지션에 약간의 비틀림이 필요하다는 것을 제외하면 꽤 기본적인 것들입니다. 트릭은 원본 링크의 이미지 상단 부분 (빨간색 버튼)을 보여주는 것입니다. 마우스로 가리키면 회색 버튼을 표시하는 -11px (웹 사이트마다 다를 수 있음) 여백으로 배경 이미지를 이동합니다.

.xa {color : #cc3300; padding-left : 14px; font-weight : bold; 배경 이미지 : url (images / x.png); 배경 위치 : 0 2px; background-repeat : no-repeat; }
.xa : hover {color : #333333; padding-left : 14px; font-weight : bold; 배경 이미지 : url (images / x.png); 배경 위치 : 0 -11px; background-repeat : no-repeat; }

이행

이 호버 효과를 표시하려면 클래스 x를 지정된 영역에 삽입하십시오. 수행 할 수있는 방법에 대한 예는 다음과 같습니다.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> 홈페이지 </a> </ p>

예 2 : 호버 배경의 링크

같은 개념으로 링크를 멋지게 보이게 할 수있는 끝없는 방법이 있습니다. 다음은 약간 다른 방법으로 호버 효과로 수행 할 수있는 작업에 대한 또 다른 예입니다. 다시 한 번 완성 된 버전을 살펴보십시오.

예 2 - 호버 배경의 링크

이 예제에서, 사용자가 마우스를 올려 놓았을 때 배경이 바뀌는 버튼 모양의 하이퍼 링크를 만드는 것입니다.

우리는 평범한 CSS로 어떻게 만들었습니까?

배경 이미지

먼저 둥근 사각형의 두 이미지를 만듭니다. 이 예제에서는 데모 목적으로이 두 이미지를 병합하지 않습니다. 빨간색 (#CC3300) 사각형의 이름을 b1.png로 지정합니다. 그리고 적갈색 (#9F2800) 사각형은 b2.png입니다.

CSS 코드

다음은 스타일 시트 코드입니다 (이 두 번째 예제에서 클래스 'y'로 이름 지정).

ay {너비 : 280px; 높이 : 42px; color : #000000; 패딩 : 10px; 텍스트 장식 : 없음; 디스플레이 : 블록; font-weight : bold; background-image : url (images / b1.png); background-repeat : no-repeat; }
ay : hover {width : 280px; 높이 : 42px; color : #FFFFFF; 패딩 : 10px; font-weight : bold; 텍스트 장식 : 없음; 디스플레이 : 블록; background-image : url (images / b2.png); background-repeat : no-repeat; }

이행

링크를 표시하려면 소스 코드의 <a href> 태그에 클래스 (y)를 삽입하면됩니다. 예:

<a href="http://www.webhostingsecretrevealed.com" class="y"> 홈페이지 </a>

최대 포장

이 기사가 귀중한 정보를 제공하고 여러분 중 일부가 창의적인 방식으로 CSS를 사용하도록 영감을주기를 바랍니다. 이 안내서에 추가해야 할 다른 사항이 있으면 의견 섹션에 자유롭게 의견을 남겨주십시오.

더 많은 CSS 튜토리얼

이 게시물이 마음에 들면 체크 아웃해야합니다. CSS 3 애니메이션을 효과적으로 활용하는 방법, CSS 3 자습서를 읽어야 함 2012, 만큼 잘 CSS 3 기술로 사이트를 멋지게 만드십시오..

Jerry Low 정보

WebHostingSecretRevealed.net (WHSR)의 설립자 - 100,000의 사용자가 신뢰하고 사용하는 호스팅 검토. 웹 호스팅, 제휴 마케팅 및 SEO에서 15 년 이상의 경험. ProBlogger.net, Business.com, SocialMediaToday.com 등의 기고자.