<div id="search">
<form action="/search/" id="searchform" method="get">
<input id="searchbox" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;✔ search something...&quot;;}" onfocus="if (this.value == &quot;✔ search something...&quot;) {this.value = &quot;&quot;}" type="text" value="✔ search something..." /><a class="tooltip"><input id="cari" type="submit" value=""/><span><p>
Information</p>
<em>U</em> can find Something</span></a></form>
</div>

<style>
/*tooltip*/
@import url(http://fonts.googleapis.com/css?family=Averia+Libre);
.tooltip{position: relative;
}
.tooltip span {position:absolute;top:-200px;right:0;font:11px Averia Libre;color:#fff;text-align:center;padding:10px;border-radius:10px;-moz-box-shadow:0px 0px 9px #000;-webkit-box-shadow: 0px 0px 9px #000;box-shadow:0px 0px 9px #000;border:1px solid #fff;background:#333 url(https://lh3.googleusercontent.com/-aPsqP_cKj0k/UB1pbaBgV_I/AAAAAAAAFiY/xqeP4CLV3ew/s48/Info.png) no-repeat top left;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;opacity:0;
}
.tooltip:hover span {position:absolute;top:35px;right:0;opacity:0.9;
}
.tooltip p {font:bold 20px/35px Averia Libre;margin:0 0 0 45px;
}
.tooltip em {font:bold 20px/20px Averia Libre;
}
/*pencarian*/
form{display:inline-block;background:#333;border-radius:5px;border:1px solid #fff;box-shadow:0 0 5px #000;padding:2px;height:30px;
}
#search input[type="text"] {background:#ddd;font:12px Averia Libre;font-style:italic;color:#000;text-align:left;width:160px;height:28px;padding:0 5px 0 5px;color:#000;float:left;border:1px solid #fff;box-shadow:inset 0 0 5px #000;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;border-radius:50px;
}
#search input[type="text"]:hover {width:200px;background:#fc5;border-radius:3px;border:1px solid #ddd;box-shadow:inset 0 0 5px #000;font-size:15px;text-align:right;color:#fff;text-shadow: -1px -2px 1px #000;
}
#search input[type="text"]:focus {width:250px;background:#fff;border-radius:50px;border:1px solid #ddd;box-shadow:inset 0 0 10px #000;
}
#cari{margin-left:4px;width:35px;height:30px;border-radius:3px;border:1px solid #fff;box-shadow:0 0 2px #333;background:#222 url(http://1.bp.blogspot.com/-7JJIq-zwDUM/UIayN81BnpI/AAAAAAAACQA/_zi-PTrGoK4/s400/search.png) no-repeat center;cursor:pointer;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;z-index:10;
}
#cari:hover{background:#fc0 url(http://1.bp.blogspot.com/-7JJIq-zwDUM/UIayN81BnpI/AAAAAAAACQA/_zi-PTrGoK4/s400/search.png) no-repeat center;width:45px;height:40px;border:1px solid #fff;box-shadow:0 0 5px #000,inset 0 0 5px #000;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);
}
</style>