Cara membuat Search Button Melayang Keren Dan Responsive. Dalam kesempatan kali ini nyekrip akan berbagi tutorial cara membuat kotak pencarian atau search box dengan CSS dan HTML, sebagai informasi bahwa Kotak pencarian atau Search Box adalah salah satu elemen UI yang paling penting pada halaman web seperti halaman web saya ini Banyak sekali manfaat yang akan didapatkan dengan memiliki kotak pencarian, siapa pun saat ini sudah sangat familiar dengan fitur kotak pencarian dan sudah pasti akrab dengan Google sebagai mesin pencari pada umumnya.
Sebuah kotak pencarian pada halaman web melakukan fungsi yang sama dengan Google yang memungkinkan pengguna untuk menemukan konten yang spesifik di website kita. Memiliki Search Box adalah kebutuhan mutlak bagi kebanyakan website dan diperlukan untuk meningkatkan kenyamanan para pengguna website.
Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang cantik dengan bantuan CSS (Cascading Style Sheets). CSS yang akan dipakai memiliki kerumitan tingkat menengah, sehingga memerlukan beberapa pemahaman dasar CSS, jadi diharapkan anda memahami dasar CSS terlebih dahulu sebelum meneruskan tutorial ini yuk di simak .
Sebagai informasi, hasil akhir dari tutorial ini akan tampak seperti gambar berikut, anda juga bisa langsung test hasil skrip dengan klik tombol “Run Skrip”. Setelah anda klik tombol “Run Skrip”, anda akan diarahkan pada halaman tujuan .
tempelkan CSS di bawah ini tepat di pasangan yang seharusnya seperti /* CSS Post Wrapper */ Bisa juga di <style type='text/css'> .
Bagaimana hasilnya? Lebih cantik kan? mengubah search box yang semulanya biasa-biasa saja menjadi sangat bergata dan bagus
Sekian tutorial Cara Membuat Search Button/Box melayang Responsive diatas masih terbilang standar. Kita bisa menambahkan indikator panah ke arah kiri untuk tombol pencarian, selain memberikan gaya yang elegan juga baik untuk “UX” (User Experience), dengan seperti itu akan membuat tombol pencarian lebih menarik sehingga bisa lebih mengarahkan pengguna ke arah kotak pencarian.
terimakasih :)
Sebuah kotak pencarian pada halaman web melakukan fungsi yang sama dengan Google yang memungkinkan pengguna untuk menemukan konten yang spesifik di website kita. Memiliki Search Box adalah kebutuhan mutlak bagi kebanyakan website dan diperlukan untuk meningkatkan kenyamanan para pengguna website.
Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang cantik dengan bantuan CSS (Cascading Style Sheets). CSS yang akan dipakai memiliki kerumitan tingkat menengah, sehingga memerlukan beberapa pemahaman dasar CSS, jadi diharapkan anda memahami dasar CSS terlebih dahulu sebelum meneruskan tutorial ini yuk di simak .
Sebagai informasi, hasil akhir dari tutorial ini akan tampak seperti gambar berikut, anda juga bisa langsung test hasil skrip dengan klik tombol “Run Skrip”. Setelah anda klik tombol “Run Skrip”, anda akan diarahkan pada halaman tujuan .
Cara membuat kotak pencarian: Menambahkan CSS
Sebenarnya kita sudah selesai dalam membuat kotak pencarian, Cuma sangat sederhana dan terkesan sangat membosankan. Supaya terlihat lebih cantik, kita akan menambahkan kode CSS untuk memberikan tampilan yang lebih baik.tempelkan CSS di bawah ini tepat di pasangan yang seharusnya seperti /* CSS Post Wrapper */ Bisa juga di <style type='text/css'> .
/* CSS Fixed Search Button */ .lyco-search {position:relative;padding:0;height:0;margin:0 auto;} #menu ul li.searchbutton {background:#606060;margin:0;padding:3px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:right;} #menu ul li.searchbutton.active {background:#11b7b5;color:#fff;} #menu ul li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;} #menu ul li.searchbutton.active:after {color:#fff;} .search-form {display:none;position:fixed;bottom:0;background:#fff; padding:5px 0;width:100%;z-index:91;margin:0 auto;} .searchform {margin:0 auto;text-align:center;line-height:45px;} .searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;font-family:'Open Sans',sans-serif;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;} .searchbar:focus {color:#666;} .searchsubmit {background:#718397;border:none;outline:none;cursor:pointer; color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px; font-family:'Oswald',sans-serif;line-height:45px;border-radius:2px; transition:background-color 1s ease-out 0s;} .searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #718397;} .searchsubmit:active {background:#718397;color:#fff;box-shadow:none;border:none;outline:none;} |
Setelah itu refresh halaman web anda, maka tampilan halaman web akan tampil seperti gambar berikut ini:
Bagaimana hasilnya? Lebih cantik kan? mengubah search box yang semulanya biasa-biasa saja menjadi sangat bergata dan bagus
Sekian tutorial Cara Membuat Search Button/Box melayang Responsive diatas masih terbilang standar. Kita bisa menambahkan indikator panah ke arah kiri untuk tombol pencarian, selain memberikan gaya yang elegan juga baik untuk “UX” (User Experience), dengan seperti itu akan membuat tombol pencarian lebih menarik sehingga bisa lebih mengarahkan pengguna ke arah kotak pencarian.
terimakasih :)
