Cara Membuat Flat Desain Search dengan HTML dan CSS

Cara Membuat Flat Desain Search dengan HTML dan CSS - Saat ini banyak tampilan web yang menggunakan style flat desain, mulai dari elemen sampai dengan tampilan utama website itu sendiri. Dengan adanya CSS kita bisa membuat berbagai macam desain salah satunya adalah flat desain, pada kesempatan kali ini saya akan kasih tutorial pengaplikasian flat desain pada satu elemen yaitu pada elemen input. Untuk lebih jelasnya saya akan praktekan Cara Membuat Flat Desain Search dengan HTML dan CSS berikut ini.

Langkah 1 : Cara Membuat Flat Desain Search dengan HTML dan CSS

Langkah pertama untuk membuat desain search, tentu kita akan membuat struktur HTML sederhana terlebih dahulu dan membuat elemen input dan button untuk dijadikan flat desain searchnya. Untuk itu silahkan kalian ketikan sintak HTML berikut ini.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<body>
    <div class="container">
       <div class="search">
          <input type="text" class="input" placeholder="What are you looking for?">
          <button type="submit" class="btn-search">
            <i class="fa fa-search"></i>
         </button>
       </div>
    </div>
</body>

Langkah 2 : Cara Membuat Flat Desain Search dengan HTML dan CSS

Langkah selanjutnya setelah membuat struktur HTML seperti diatas adalah membuat desain flat untuk elemen input dan button dengan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Lato');
body {
  background: #f5f6fa;
  font-family: 'Lato', sans-serif;
}
.input {
  float: left;
  width: 93%;
  border: 3px solid #E91E63;
  padding: 5px;
  height: 20px;
  outline: none;
  color: #9DBFAF;
  border-radius: 25px 25px;
}
.input:focus {
  color: #E91E63;
}
.btn-search {
  position: absolute;  
  right: -40px;
  width: 40px;
  height: 36px;
  border: 1px solid #E91E63;
  background: #E91E63;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}
.container {
  width: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #E91E63;
}

Setelah semua sintak HTML dan CSS telah kalian ketikan, silahkan simpan filenya kemudian kalian bisa melihat hasilnya pada browser masing - masing. Maka hasil akhir flat desain akan terlihat seperti pada gambar berikut ini.

Cara Membuat Flat Desain Search dengan HTML dan CSS

Baiklah, cukup sekian tutorial HTML dan CSS mengenai bagaimana Cara Membuat Flat Desain Search dengan HTML dan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

13 September 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