Tombol Ajakan Bertindak sederhana Dengan CSS & jQuery

Panggilan untuk bertindak dalam desain web adalah istilah yang digunakan untuk elemen di halaman web yang meminta tindakan dari pengguna (mengklik, melayang, dll). Hari ini kita akan pergi buat tombol ajakan bertindak efektif dan mengagumkan dengan beberapa CSS dan jQuery yang menarik perhatian pengguna dan membujuknya untuk mengklik .

Sepanjang tutorial ini, kami akan menjelaskan setiap baris kode yang digunakan dengan detail dan berharap ini akan bermanfaat bagi Anda. Tutorial berikut menggunakan HTML, CSS, dan jQuery dengan tingkat kesulitan Pemula dan perkiraan waktu penyelesaian 45 menit.

Unduh Tutorial (.zip) atau Demo

Bagian I - Buat Gambar Tombol

Pada bagian pertama ini kami akan menunjukkan kepada Anda cara membuat gambar yang dibutuhkan dengan Photoshop dalam langkah-langkah mudah yang sederhana. Ayo mulai.

Buat dokumen Photoshop baru dengan lebar 580px dan tinggi 130px. Pergi ke Melihat > Panduan Baru kemudian, atur Orientasi untuk Horisontal dan Posisi hingga 65px.

Buat lebih banyak panduan; masing-masing untuk bagian atas, bawah, kiri dan kanan. Gambar Anda harus memiliki panduan berikut setelah Anda selesai:

Panduan tampaknya membagi kanvas Anda menjadi dua bagian atas dan bawah. Pilih menu Alat Persegi Panjang Bulat, mengatur Radius ke 5px dan menggambar bentuk persegi panjang di bagian atas kanvas.

Ubah Gaya untuk Hamparan Gradien dan Pukulan.

Pilih menu Mengetik Alat dan jenis “Unduh” untuk sebagai sampel teks ke dalam kotak yang telah Anda buat. Luruskan teks ke tengah tengah kotak dan output Anda akan terlihat seperti ini:

Kami menyelesaikan pembuatan status pertama tombol unduhan. Ayo buat grup baru dan pindahkan semua layer ke dalamnya. Gandakan grup dan kemudian posisikan di bawah grup pertama. kami telah membuat.

Buka grup yang digandakan dan ubah Hamparan Gradien dan Pukulan gaya kotak persegi panjang kedua kami (yang melayang-layang) dengan setttings berikut:

Dengan grup kedua dipilih, gunakan Pindah alat untuk memindahkan seluruh kotak persegi panjang ke bagian bawah kanvas.

Itu dia! Kami selesai dengan bagian pertama. Simpan gambar Anda sebagai download.png dan jalankan editor kode favorit Anda.

Unduh PSD

Bagian II - HTML

Langkah 1 - Siapkan File yang diperlukan

Buat folder, dan beri nama. Kami akan menyebutkannya jQueryCallToaction untuk tutorial ini. Dalam jQueryCallToaction folder, buat file / folder berikut ini:

1. File HTML kosong, index.html
2. File CSS kosong, style.css
3. File JavaScript kosong, script.js
4. Folder, bernama "gambar"
5. Tempat download.png dalam gambar map.

Langkah 2 - Tautan index.html dengan CSS & JS

Mari kita hubungkan CSS dan JavaScript untuk index.html. Tempatkan mereka di dalam . Kita mulai dengan File CSS:

lalu versi terbaru jQuery dari repositori Perpustakaan AJAX Google:

dan akhirnya kami File JavaScript :

Sekarang milik kita akan terlihat seperti ini:

Mari kita masukkan kode untuk tombol kita di dalamnya tag:

Penjelasan: Kami telah membuat paragraf untuk dua tombol, masing-masing dibungkus dengan dengan hyperlink dalam. Baris 1: class = "button1" ditempatkan di dalam , sedangkan Jalur 2: class = "button1" ditempatkan di dalam

 .button1 / * Tombol hanya dengan CSS * / background: url (images / download.png) 0 0; tinggi: 65px; lebar: 580px; display: blok;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

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

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