Membuat Animasi Unik Pada Form Search

Halo teman-teman semuanya, bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan mempraktekan cara Membuat Animasi Unik Pada Form Search,
mungkin teman-teman sering kali menemukan efek-efek unik ketika teman-teman menjelajahi website, nah bagai mana cara membuat efek unik seperti itu?.

disini saya kan coba terapkan membuat efek animasi unik pada form search, untuk pengembangannya nanti bisa kalian terapkan pada element HTML apapun.
Oke kita langsung saja praktekan, silahkan teman-teman buat sebuah file dan ketikan script HTML berikut ini:

Pada script HTML diatas saya membuat sebuah form inputan, nah form inilah yang nantinya akan kita design, jika sudah silahkan teman-teman tambahkan script CSS berikut ini :

Pada pengaturan css ini saya memberikan banyak pengaturan seperti background gambar, lebar, posisi dari background gambarnya lalu jangan lupa tambahkan efek transition dan propertis lainnya yang teman-teman bisa cari sendiri fungsi dari propertis yang saya gunakan.

Kemudian saya membuat sebuah focus selector yaitu ketika inputannya sedang aktif, saya mengatur kembali lebar, border radius, posisi background dan paddingnya, jika sudah silahkan teman-teman save, lalu coba jalankan pada browser masing-masing, jika benar maka hasilnya akan seperti berikut ini:

lalu coba teman-teman klik formnya, lihat efek yang terjadi, cukup mudah bukan, sekian dulu tutorial kali ini, semoga bermanfaat.

Terimakasih.