Membuat Animasi Search Form dengan CSS

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 :)

5 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat