Membuat animasi search box hanya menggunakan CSS merupakan hal yang penting dalam pembuatan sebuah situs web. Search Box atau kotak pencarian merupakan elemen desain yang banyak digunakan dalam situs-situs besar. Dari sudut pandang kegunaan, pengguna yang terganggu menggunakan fungsi pencarian sebagai opsi terakhir ketika mencari informasi spesifik di situs web. Jika konten suatu situs web tidak tertata dengan baik, mesin pencari yang efisien tidak hanya membantu tetapi juga bagian yang penting, bahkan sebagai navigasi dasar situs web. Faktanya, pencarian adalah jalur kehidupan pengguna untuk menguasai situs web yang kompleks.

Setelah mengetahui tentang search box atau kotak pencarian, kita akan membuat search box animasi hanya menggunakan CSS. Kode Implementasi dibagi menjadi 2 bagian yaitu HTML dan CSS.

Kode HTML

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container">
      <input placeholder='masukkan pencarian...' type='text'>
      <i class="fa fa-search"></i>
    </div>
  </body>
</html>

Kode CSS

* {
  box-sizing: border-box;
}

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type=text] {
  position: relative;
  padding: 15px 40px 15px 20px;
  width: 40px;
  color: #525252;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 4px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%);
  transition: width 0.4s ease;
  outline: none;
}

input[type=text]:focus {
  width: 350px;
}

i {
  position: relative;
  left: -40px;
  color: #207ce5;
}

Hasil

Kamu juga dapat melihat langsung melalui jsfiddle.

About Me

Inpows

Membuat Animasi Search Box Hanya Menggunakan CSS

Kode HTML

Kode CSS