Butang Mudah Call To Action Dengan CSS & jQuery

Panggilan untuk bertindak dalam reka bentuk web adalah istilah yang digunakan untuk elemen dalam laman web yang meminta tindakan dari pengguna (mengklik, melayang, dll). Hari ini kita akan pergi buat panggilan untuk bertindak dengan berkesan dan hebat dengan beberapa CSS dan jQuery yang merebut perhatian pengguna dan membujuknya untuk mengklik .

Sepanjang tutorial ini, kami akan menerangkan setiap baris kod yang digunakan dengan butiran dan berharap ia berguna untuk anda. Penggunaan tutorial berikut HTML, CSS dan jQuery dengan tahap kesukaran Pemula dan anggaran masa penyelesaian 45 minit.

Muat turun Tutorial (.zip) atau Demo

Bahagian I - Buat Imej Butang

Di bahagian pertama ini, kami akan menunjukkan kepada anda cara membuat imej yang diperlukan dengan Photoshop dalam langkah mudah mudah. Mari mulakan.

Buat dokumen Photoshop baru dengan lebar 580px dan ketinggian 130px. Pergi ke Lihat > Panduan Baru kemudian, tetapkan Orientasi kepada Mendatar dan juga Jawatan kepada 65px.

Buat lebih banyak panduan; masing-masing untuk bahagian atas, bawah, kiri dan kanan. Imej anda sepatutnya mempunyai panduan berikut setelah anda selesai:

Panduan kelihatan berpecah kanvas anda ke bahagian atas dan bawah. Pilih Alat Rectangular Bulat, menetapkan Radius untuk 5px dan lukiskan bentuk segi empat tepat pada bahagian atas kanvas.

Tukar Gaya untuk Overlay Gradien dan Strok.

Pilih Taipkan Alat dan jenis “Muat turun” sebagai contoh teks ke dalam kotak yang telah anda buat. Sejajarkan teks ke pusat tengah kotak dan output anda harus kelihatan seperti ini:

Kami selesai penciptaan keadaan pertama butang muat turun. Mari kita buat kumpulan baru dan memindahkan semua lapisan ke dalamnya. Duplikat kumpulan dan kemudian meletakkannya di bawah kumpulan pertama. kami telah mencipta.

Kepala ke kumpulan yang ditiru dan tukar Overlay Gradien dan Strok gaya kotak segi empat tepat kami (yang berlegar) dengan set berikut:

Dengan kumpulan kedua yang dipilih, gunakan Pindah alat untuk memindahkan kotak segi empat tepat ke separuh kedua kanvas.

Itu sahaja! Kami selesai dengan bahagian pertama. Simpan imej anda sebagai download.png dan api menyunting editor kod kegemaran anda.

Muat turun JPA

Bahagian II - HTML

Langkah 1 - Sediakan Fail yang diperlukan

Buat folder, dan beri nama. Kita akan namakannya jQueryCallToaction untuk tutorial ini. Dalam jQueryCallToaction folder, buat fail / folder berikut:

1. Fail HTML kosong, index.html
2. Fail CSS kosong, style.css
3. Fail JavaScript Fail, script.js
4. Folder, yang dinamakan "imej"
5. Tempat download.png dalam imej folder.

Langkah 2 - Pautan index.html dengan CSS & JS

Mari kita sambungkan kami CSS dan JavaScript kepada index.html. Letakkan mereka di dalam . Kami bermula dengan Fail CSS:

maka jQuery versi terkini dari repositori Perpustakaan AJAX Google:

dan akhirnya kami Fail JavaScript :

Sekarang kami sepatutnya kelihatan seperti ini:

Mari letakkan kod untuk butang kami di dalam tag:

Penjelasan: Kami telah mencipta perenggan untuk dua butang, masing-masing dibungkus dengan hiperpautan dalam. Baris 1: kelas = "button1" diletakkan di dalam , manakala Line 2: kelas = "button1" diletakkan di dalam

 .button1 / * Button dengan CSS only * / background: url (images / download.png) 0 0; ketinggian: 65px; lebar: 580px; paparan: blok;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; ketinggian: 65px; lebar: 580px; paparan: blok;  .button2 a background-position: 0 0;  

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