CSS & jQuery를 사용한 간단한 Call To Action버튼

행동을 요구하다 웹 디자인에서 사용자가 클릭, 호버링 등의 행동을 요구하는 웹 페이지의 요소에 사용되는 용어입니다. 오늘 우리는 일부 CSS 및 jQuery로 효과적이고 멋진 호출 버튼 만들기 사용자의주의를 끌고 그를 유혹하여 .

이 튜토리얼에서는 사용 된 코드의 모든 라인에 대해 자세히 설명하고 유용하게 사용하기를 희망합니다. 다음 자습서 사용 HTML, CSS 및 jQuery 난이도가 초보자 및 완료 예상 시간 45 분.

튜토리얼 다운로드 (.zip) 또는 데모

1 부 - 버튼 이미지 생성

이 첫 번째 부분에서는 간단한 단계로 Photoshop을 사용하여 필요한 이미지를 만드는 방법을 보여줍니다. 시작하자.

새 Photoshop 문서 만들기 너비는 580px이고 높이는 130px입니다. 이동 전망 > 새 안내서 그런 다음 정위 에 수평 그리고 위치 ~ 65px.

추가 가이드 만들기; 위, 아래, 왼쪽 및 오른쪽 각각에 대해. 완료되면 이미지에는 다음 가이드가 있어야합니다.

안내선은 캔버스를 위아래로 나눕니다. 선택 둥근 사각형 도구, 설정 반지름 5px로 설정하고 캔버스의 상단 절반에 직사각형 모양을 그립니다..

에 대한 스타일 변경 그라디언트 오버레이 과 행정.

선택 유형 도구 및 유형 “다운로드” 당신이 만든 상자에 샘플 텍스트로. 상자 중앙의 가운데에 텍스트를 정렬하면 결과물은 다음과 같이 보입니다.

다운로드 버튼의 첫 번째 상태 만들기가 완료되었습니다. 하자 새 그룹을 만들자. 모든 레이어를이 레이어로 이동합니다.. 그룹 복제 첫 번째 그룹 아래에 배치하십시오. 우리가 만든.

중복 된 그룹으로 이동하여 그라디언트 오버레이 과 행정 우리 두 번째 직사각형 상자 (호버 한 상자)의 스타일은 다음과 같이 설정됩니다.

두 번째 그룹을 선택한 상태에서 움직임 도구를 사용하여 사각형 상자 전체를 캔버스의 두 번째 절반까지 아래로 이동합니다..

그게 다야! 우리는 첫 번째 부분을 마쳤습니다. 이미지를 다음과 같이 저장하십시오. download.png 좋아하는 코드 편집기를 실행하십시오..

PSD 다운로드

2 부 - HTML

1 단계 - 필요한 파일 준비

폴더를 만들고 이름을 지정하십시오. 우리는 그것을 지명 할 것이다. jQueryCallToaction 이 자습서에서는 내부 jQueryCallToaction 폴더에 다음 파일 / 폴더를 만듭니다.

빈 HTML 파일, index.html
빈 CSS 파일, style.css
빈 JavaScript 파일, script.js
폴더, "이미지들"
장소 download.png 내부 이미지들 폴더.

2 단계 - 링크 `index.html` CSS와 JS로

우리와 CSS 과 자바 스크립트 에 index.html. 그들을 안에 넣어 라. . 우리는 CSS 파일:

다음에 최신 버전의 jQuery Google AJAX Libraries 저장소의

그리고 마침내 우리 자바 스크립트 파일 :

이제 우리는 다음과 같이 보일 것입니다.

내부 버튼에 코드를 삽입 해 봅시다. 태그 :

설명: 두 개의 버튼에 대한 단락을 만들었습니다. 각 단락은 하이퍼 링크가있는 내부. 1 호선 : class = "button1" 안쪽에 놓여있다. , 라인 2 : class = "button1" 안쪽에 놓여있다.

3.1 단계 - CSS 전용 버튼

CSS 만 사용하여 첫 번째 버튼을 만듭니다. 열어 라. style.css 다음 코드를 안에 붙여 넣으십시오..

 .button1 / * CSS 만있는 버튼 * / background : url (images / download.png) 0 0; 높이 : 65px; 너비 : 580px; 디스플레이 : 블록;  .button1 : hover / * mouseOver * / background : url (images / download.png) 0 65px;

설명: 첫 번째 버튼은 100 % HTML / CSS 버튼입니다. CSS 속성 배경 로드 download.png 이미지의 이미지와 정확히 일치하는 이미지 폭 580 픽셀이지만 절반 만 신장 65px (130/2)이므로 두 개의 버튼 중 하나만 download.png 가 표시됩니다. 버튼의 위치는 마지막 값에 의해 결정되고 제어됩니다. 배경 재산. 마지막 가치를 생각해 보라. 배경 이미지가 어디에서 시작해야하는지 (픽셀의 높이 위치 측면에서)로 속성.

3.2 단계 - CSS + jQuery 버튼

우리는 같은 이미지를 사용할 것입니다. download.png 우리 두 번째 버튼. 차이점은 두 번째 버튼에 jQuery 효과가 주입되어 애니메이션이 부드럽게 처리된다는 것입니다.. CSS부터 시작해 보겠습니다.. 팔로우 코드를 내부에 배치하십시오. style.css.

 .button2, .button2 a background : url (images / download.png) 0 -65px; 높이 : 65px; 너비 : 580px; 디스플레이 : 블록;  .button2 a background-position : 0 0;

설명: 기본적으로 .button2 과 .button2 a 마지막 스타일을 제외하고는 같은 스타일을 공유합니다. 배경 재산. .button2 파란색 버튼을 표시하는 동안.button2 a 흰색 버튼을 표시합니다..

CSS 부분이 완료되었습니다. jQuery를 사용하여 두 상태 간을 전환하여 부드러운 전환 효과를 만듭니다. 열어 라. script.js 다음 코드를 안에 넣으십시오..

 $ (document) .ready (function (). $ ( '. button2 a') .hover (function () $ this this.stop () animate ( 'opacity': '0', 500); , function () $ (this) .stop (). animate ( 'opacity': '1', 500);););

설명:$ (this) 인용하다 .button2 a 그리고 그것을 잡았을 때 jQuery 애니메이션을 사용하여이 요소의 불투명도를 0 그래서 우리는 .button2 요소 (파란색 버튼). 그리고 마우스가 꺼지면 우리는 불투명도를 1 와 500 애니메이션 속도의 밀리 초.

그게 다야. !

이 튜토리얼을 따라 주셔서 감사합니다. 나는 당신이 그것을 좋아하고 그것을 따라갈 수 있었으면 좋겠습니다. 당신이 모든 것을 올바르게했다면, 이런 식으로 끝났어야합니다. 문제가 있거나 도움이 필요하면 의견 섹션에 질문을 적어주십시오..

이 자습서에서 필요한 모든 파일을 다시 작성하는 방법은 다음과 같습니다.

다운로드 버튼 (.PSD)
튜토리얼 다운로드
데모

편집자 주 : 이 게시물은에 의해 작성됩니다 라이언 투르 키 Hongkiat.com. Ryan은 Photoshop을 좋아하는 디자이너 겸 웹 개발자 (Javascript, PHP, XHTML, CSS)입니다..