Nút Gọi hành động đơn giản với CSS & jQuery

Kêu gọi hành động trong thiết kế web là một thuật ngữ được sử dụng cho các thành phần trong trang web thu hút một hành động từ người dùng (nhấp, di chuột, v.v.). Hôm nay chúng ta sẽ tạo nút gọi hành động hiệu quả và tuyệt vời với một số CSS và jQuery thu hút sự chú ý của người dùng và lôi kéo anh ta nhấp vào .

Trong suốt hướng dẫn này, chúng tôi sẽ giải thích mọi dòng mã được sử dụng với các chi tiết và hy vọng nó sẽ hữu ích cho bạn. Hướng dẫn sau đây sử dụng HTML, CSS và jQuery với mức độ khó Người bắt đầu và thời gian hoàn thành ước tính của 45 phút.

Hướng dẫn tải xuống (.zip) hoặc là Bản giới thiệu

Phần I - Tạo hình ảnh nút

Trong phần đầu tiên này, chúng tôi sẽ chỉ cho bạn cách tạo các hình ảnh cần thiết với Photoshop trong các bước đơn giản dễ dàng. Hãy bắt đầu.

Tạo một tài liệu Photoshop mới với chiều rộng 580px và chiều cao 130px. Đi đến Lượt xem > Hướng dẫn mới sau đó, đặt Sự định hướng đến Ngang và Chức vụ đến 65px.

Tạo thêm hướng dẫn; mỗi cái cho đỉnh, đáy, trái và phải. Hình ảnh của bạn nên có những hướng dẫn sau đây khi bạn hoàn thành:

Các hướng dẫn xuất hiện để chia canvas của bạn thành nửa trên và dưới. Chọn Công cụ hình chữ nhật tròn, đặt Bán kính đến 5px và vẽ một hình chữ nhật trên nửa trên của khung vẽ.

Thay đổi kiểu cho Lớp phủ Gradient và Cú đánh.

Chọn Kiểu Công cụ và loại “Tải về” cho dưới dạng văn bản mẫu vào hộp mà bạn đã tạo. Căn chỉnh văn bản vào giữa hộp và đầu ra của bạn sẽ trông giống như thế này:

Chúng tôi đã hoàn thành việc tạo trạng thái đầu tiên của nút tải xuống. Hãy tạo một nhóm mới và di chuyển tất cả các lớp vào nó. Nhân đôi nhóm và sau đó đặt nó dưới nhóm đầu tiên. chúng tôi đã tạo ra.

Trụ sở nhóm nhân đôi và thay đổi Lớp phủ Gradient và Cú đánh kiểu hộp hình chữ nhật thứ hai của chúng tôi (hình lơ lửng) với các độ lún sau:

Với nhóm thứ hai được chọn, sử dụng Di chuyển công cụ để di chuyển toàn bộ hộp hình chữ nhật xuống nửa sau của khung vẽ.

Đó là nó! Chúng tôi đã hoàn thành với phần đầu tiên. Lưu hình ảnh của bạn dưới dạng download.png và kích hoạt trình soạn thảo mã yêu thích của bạn.

Tải xuống PSD

Phần II - HTML

Bước 1 - Chuẩn bị các tệp cần thiết

Tạo một thư mục và đặt tên cho nó. Chúng tôi sẽ đặt tên cho nó jQueryCallToaction cho hướng dẫn này. Phía trong jQueryCallToaction thư mục, tạo các tập tin / thư mục sau đây:

1. Tệp HTML trống, index.html
2. Tệp CSS trống, style.css
3. Tệp JavaScript trống, script.js
4. Thư mục, được đặt tên "hình ảnh"
5. Địa điểm download.png phía trong hình ảnh thư mục.

Bước 2 - Liên kết index.html với CSS & JS

Hãy liên kết của chúng tôi CSS và JavaScript đến index.html. Đặt chúng bên trong . Chúng tôi bắt đầu với Tệp CSS:

sau đó phiên bản mới nhất của jQuery từ kho lưu trữ Thư viện AJAX của Google:

và cuối cùng là Tệp JavaScript :

Bây giờ của chúng tôi nên trông giống như thế này:

Hãy đặt mã cho các nút của chúng tôi bên trong nhãn :

Giải trình: Chúng tôi đã tạo các đoạn văn cho hai nút, mỗi nút được bọc bằng với siêu liên kết phía trong. Dòng 1: lớp = "nút1" được đặt bên trong , trong khi dòng 2: lớp = "nút1" được đặt bên trong

 .button1 / * Nút chỉ có CSS ​​* / nền: url (hình ảnh / download.png) 0 0; chiều cao: 65px; chiều rộng: 580px; hiển thị: khối;  .button1: hover / * mouseOver * / nền: url (hình ảnh / download.png) 0 65px;  

 .button2, .button2 a nền: url (hình ảnh / download.png) 0 -65px; chiều cao: 65px; chiều rộng: 580px; hiển thị: khối;  .button2 a nền-vị trí: 0 0;  

 $ (tài liệu). yet (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0', 500); , function () $ (this) .stop (). animate ('opacity': '1', 500);););