Membuat Effect Form Search Menggunakan CSS

21/09/2014    Faizal Rafik    2693     Website

Mesin pencari atau search engine adalah alat untuk melakukan pencarian file-file yang tersimpan didalam website kita. Search engine merupakan perangkat pencari informasi dari dokumen-dokumen yang tersedia pada website kita. Dengan adanya mesin pencari didalam website kita, kita dapat mempermudah para pengunjung website kita untuk mencari file atau dokumen yang mereka cari. Ada baiknya bila kita membuat tampilan search engine pada website kita menjadi lebih menarik lagi dengan menambahkan fitur-fitur effect yang memukau.

Nah pada tutorial kali ini saya sudah menyiapkan beberapa effect yang dapat kalian terapkan pada mesin pencarian atau search engine yang ada diwebsite kalian. Baiklah langsung saja kita masuk ke pokok pembahasannya ya teman-teman. Disini saya menggunakan icon search yang terdapat di Font Awesome, jadi kalian bisa download terlebih dahulu font awesomenya.

Dibawah ini adalah struktur untuk HTML nya :

Kemudian Untuk CSS nya seperti gambar dibawah ini :

Berikut adalah kode keseluruhannya dan hasilnya :

See the Pen AvLIy by Dumet_School (@dumet_school) on CodePen.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More