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,

DEMO

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;quot;icon-&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;quot;icon-&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;#39;text&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;#39;submit&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;
}