Home » » Membuat Search Box keren

Membuat Search Box keren


Membuat Search Box keren
Kotak pencarian ini membuat saya pingin berbagi,karen buat saya kotak pencarian ini enak di lihat :d
dan mungkin juga anda akan menyukainya,


Bagai mana? anda tertarik.jika ya..silakan copy code yang ada di bawah ini :

Letakan Font-Awesome di bawah kode <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

HTML
<div class="search"> <input class="search_box" type="checkbox" id="search_box"> <label class="icon-search" for="search_box"></label> <div class="search_form"> <form action="#"> <input type="text"><input type="submit" value="search"> </form> </div> </div>
Ket:  Ganti tanda "#" dengan URL blog anda  


CCS 
body{
  margin:10px;
  text-align:center;
}
.search{
  position:relative;
  display: inline-block;
}
[class^=&amp;amp;amp;quot;icon-&amp;amp;amp;quot;]{
  background: #3498db;
  color:#fff;
  border-radius:5px;
  display:inline-block;
  padding:6px 7px 7px;
  font-size:18px;
  text-shadow:1px 1px 2px #21638F;
  box-shadow: inset 0px 0px 0px #21638F;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  cursor: pointer;
  z-index:10;
  position:relative;
}
[class^=&amp;amp;amp;quot;icon-&amp;amp;amp;quot;]:hover{
  background: #5dade2;
  text-shadow:0px 0px 0px #21638F;
  box-shadow: inset 0px 0px 8px #21638F;
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
}
.search_form{
  background: #5dade2;
  position:absolute;
  z-index:0;
  padding:0px 5px;
  right:0;
  top:15px;
  overflow: hidden;
  border-radius:10px;
  width: 20px;
  height:0px;
  transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
  opacity:0;
   transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
}
.search_form input{
  background:#fff;
  border:none;
}
.search_form input[type=&amp;amp;amp;#39;text&amp;amp;amp;#39;]{
  border-radius:5px 0 0 5px;
  width:150px;
  margin:0px 1px 0px 0;
  padding:0px 5px 1px;
  min-height:23px;
}
.search_form input[type=&amp;amp;amp;#39;submit&amp;amp;amp;#39;]{
  border-radius:0 5px  5px 0;
  text-transform:uppercase;
  font-size:11px;
  padding:0px 5px;
  min-height:24px;
  margin:0px 0px 0px 0;
  cursor: pointer;
}
.search_box{
  visibility: hidden;
}
.search_box:checked~.search_form{
  width: 213px;
  height:24px;
  padding:5px;
  top:35px;
  transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
  -webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
  opacity:1;
  transition:0.3s all ease-out 0.5s;
  -webkit-transition:0.3s all ease-out 0.5s;
}

Semoga bermanfaat
Sumber kode:  http://codepen.io/MakhonkoDenis

5 komentar:

Posting Komentar

Terima Kasih Untuk Komentar Dan Waktu Luangnya Sudah Mengunjungi Blog Sederhana ini
Semoga Artikel ini Bermanfaat.

Terakhir Diperbaharui