Desain Kotak Pencarian Bergaya CSS dalam HTML Biasa

sukma
sukma
2 minute read

Membangun desain kotak pencarian yang kreatif dan bergaya CSS dengan HTML biasa selalu menyenangkan. Hari ini, Kami akan membuat beberapa ide hebat untuk kotak telusur.

Semua ini akan menjadi unik dan Anda tidak pernah menemukan desain seperti itu di internet. Kami telah membuat contoh dengan demo dan sumber yang dapat diunduh.

Sebelum kita melanjutkan, saya ingin menarik perhatian Anda ke kotak telusur CSS dengan desain cantik sebelumnya yang juga dibuat dengan CSS dan HTML murni.

Kami membuat 6 ide berbeda untuk ba pencarian desain material yang dapat Anda terapkan di situs web Anda. Kami akan memandu Anda tentang bagaimana kami telah membangun bilah pencarian yang bergaya seperti itu.

Tujuan dari kotak pencarian agar situs dapat digunakan untuk mencari konten yang diinginkan dengan cepat. Pencarian desain yang bergaya atau bidang masukan kotak centang menarik pengguna lebih banyak untuk mencari berbagai hal. Karena itu, keterlibatan pengguna akan meningkat.

Bidang HTML penelusuran digunakan oleh situs web untuk membuat situs Anda terlihat lebih baik dan ramah pengguna. Jika Anda mendesain situs internet yang bagus, maka Anda harus membutuhkan beberapa bentuk bilah pencarian animasi CSS yang bagus di situs Anda.

Apakah Anda memiliki situs web dan tidak memiliki bilah pencarian di situs Anda? Dan, Mencari beberapa formulir pencarian yang lebih baik untuk menggantikan yang lama?

Mengapa tidak mencoba tutorial kami ini dan dapatkan beberapa contoh hebat dan cepat dari desain formulir pencarian. Yang harus Anda salin dan tempel kode untuk diterapkan.

Bagaimana Membuat Kotak Pencarian Bergaya di HTML / CSS

Seperti yang saya katakan, kami memiliki enam desain berbeda untuk kotak telusur dan ini kode HTML dari yang pertama.

<div class="Flatsearch">   <input id="input" placeholder="Search..."/>   <button id="button"><i class="fa fa-search"></i></button> </div> <div class="note">Click the button or hit enter.</div>

Soalnya, kita baru saja mendefinisikan div utama yang memiliki field tipe input dan tombol. Markup kami cukup sederhana.

Terapkan Gaya CSS

CSS juga cukup lugas dan mudah diterapkan. Kami memberi gaya kelas pembungkus .Flatsearch lalu lakukan beberapa gaya pada kolom input dan tombol.

Mari kita lihat kode CSS gaya lengkap di sini.

 .Flatsearch {     align-items: center;     background: #8a44d5 none repeat scroll 0 0;     border-radius: 10px;     display: flex;     justify-content: space-between;     margin: 12px 0;     padding: 15px;     transition: all 0.5s ease 0s; } .Flatsearch:hover, .Flatsearch:focus {   background: #853cd3; } .Flatsearch button, .Flatsearch input {   -webkit-appearance: none;      -moz-appearance: none;           appearance: none;   background: transparent;   border: 0;   color: inherit;   font: inherit;   outline: 0; }

Kami hanya menampilkan contoh pertama kotak telusur CSS di sini, tetapi Anda menemukan keenam contoh tersebut di demo. Semua kotak pencarian dibuat menggunakan CSS murni.

Jika suka, jangan lupa share ke teman-teman kamu.