Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Animasi Form Search Menggunakan Bootstrap. Animasi kali ini saya membuat form search akan muncul ketika ikon search di klik dan form search dengan tampilan width melebar ketika kursor diletakan kedalam form search.

Langkah pertama untuk Membuat Animas Form Search Menggunakan Bootstrap yaitu kita membuat struktur htmlnya terlebih dahulu. Membuat struktur htmlnya kebetulan saya menggunakan bootstrap. Teman-teman bisa download terlebih dahulu bootstrapnya di getbootstrap.com. Jika sudah download, kita masuk ke struktur htmlnya dan berikut scriptnya ya.

Nah jika sudah selesai maka kita bisa langsung membuat style cssnya di dalam tag head ya teman-teman. Dan berikut script cssnya.

Jika teman-teman buka di browser masing-masing maka akan tampil seperti gambar di bawah ini.

Membuat Animasi Form Search Menggunakan Bootstrap

Gambar di atas adalah gambar pertama sebelum ikon search di klik.

Membuat Animasi Form Search Menggunakan Bootstrap

Dan Gambar kedua adalah tampilan form search setelah ikon search di klik.

Membuat Animasi Form Search Menggunakan Bootstrap

Dan terakhir adalah gambar ketika kursor di letakan di dalam form search.

Demikian artikel tentang cara Membuat Animasi Form Search Menggunakan Bootstrap. Semoga bermanfaat dan selamat mencoba ya teman-teman.