Dalam sebuah website portal berita contohnya pasti sangat penting adanya input search pada halaman website, search disini tentu akan mempermudah dalam pencarian yang sesuai diketikkan atau inputan teks seorang pengguna atau user. Dalam kasus ini kita akan belajar membuat animasi search bar ,dengan tujuan agar menarik dalam tampilan serta mudah ditemukan. Bagaimana cara membuat animasi search bar yuuuk disimak langkah-langkahnya.Langkah-langkah pertama tentu siapkan terlebih dahulu struktur HTML nya seperti code dibawah ini :

sahabat bisa perhatikan dalam file html terdapat sebuah form didalamnya terdapat input type=text dan input type=submit. Pada input type=text saya meberikan id=s-box yang akan dipakai untuk memberikan style CSS, lalu pada input type=submit saya berikan class=material-icons untuk sebuah icons.

Langkah selanjutnya ini yang penting yaitu style CSS-nya silahkan ketikkan seperti code dibawah ini:

bisa dilihat line pertama pada code CSS diatas saya menggunakan import sebuah link untuk Icon yang dipakai, lihat kembali pada input type=submit yang terdapat di file HTML.

Pada pengaturan css ini saya memberikan banyak pengaturan seperti posisi ,efek transition dan property lainnya yang sahabat bisa cari sendiri fungsi dari property yang saya gunakan.

emudian saya membuat sebuah focus selector yaitu ketika inputannya sedang aktif, saya mengatur kembali lebar line maupun menampilkan icon ya, jika sudah silahkan sahabat save, lalu coba jalankan pada browser masing-masing, jika benar maka hasilnya akan seperti berikut ini:

Membuat Animasi Search Bar Dengan HTML CSS

Lalu coba klik pada form inputnya maka akan terlihat animasinya seperti tampilan dibawah ini:

1-Membuat Animasi Search Bar Dengan HTML CSS

saya kira cukup pembahasan kali ini tentang cara membuat animasi search bar dengan html css, semoga bermanfaat dan sampai jumpa pada pembahasan lainnya.

terima kasih

WhatsApp chat