Membuat Animasi Search Form dengan CSS

05/03/2018    Risman Hakim    189     Website

Membuat Animasi Search Form dengan CSS - Dalam setiap tampilan website pasti terdapat form search untuk mempermudah user dalam mencari sesuatu berupa konten yang terdapat didalam webiste itu sendiri. Dan tentunya banyak juga tampilan search yang disuguhkan, mulai dari efek ataupun penambahan animasi - animasi menarik lainnya. Nah, kali ini saya akan kasih tutorial buat kalian yang ingin membuat tampilan search form dengan tambahan animasi yang cukup menarik. Berikut tutorial Membuat Animasi Search Form dengan CSS.

Langkah 1 : Membuat Animasi Search Form dengan CSS

Sebelum memulai praktek untuk membuat animasi search form, kalian siapkan terlebih dahulu bahan - bahan yang akan dipakai untuk search formnya yakni icon search, silahkan kalian bisa menggunakan gambar dibawah ini ataupun bisa menyesuaikan sendiri.

Membuat Animasi Search Form dengan CSS

Langkah 2 : Membuat Animasi Search Form dengan CSS

Selanjutnya, buat satu file HTML dan ketikan sintak HTML berikut sebagai struktur awal dalam membuat animasi search form.

<body>
    <div id="container">
      <form action="">
          <input id="search" type="text" placeholder="What're you looking for ?">
          <input value="" type="submit">
      </form>
    </div>
</body>

Langkah 3 : Membuat Animasi Search Form dengan CSS
Setelah membuat strukturnya, selanjutnya ketikan sintak CSS berikut untuk menambahkan animasi pada search form.

@import url('https://fonts.googleapis.com/css?family=Dosis');
body {
  background: #DAD9DE;
}
#container {
  margin: 50px 100px;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
}
input[type="text"] {
  font-family: 'Dosis', sans-serif;
  height: 75px;
  font-size: 50px;
  border: none;
  color: #434B4E;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 9;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 65px;
  width: 65px;
  border: none;
  background: url('icon-search.png') center center no-repeat;
}
input[type="submit"]:hover {
  opacity: 0.8;
}

Setelah semua sintak telah diketikan, simpan filenya kemudian bka pada browser masing - masing dan lihat hasilnya. Maka hasilnya akan seperti pada gambar dibawah ini. jika kalian klik pada icon search akan tampil suatu animasi yang memberikan kolom pencarian. Selesai

Membuat Animasi Search Form dengan CSS

Bagaimana, menarik bukan tampilan search form nya ? Baiklah, cukup sekian tutorial sederhana Membuat Animasi Search Form dengan CSS, semoga bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More