Cara Membuat Flat Desain Search dengan HTML dan CSS

13/09/2018    Risman Hakim    205     Website

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

No data.

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