<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2uNQ0eTX4DWB4Cc5_J7JpiH8DBTSfmdWwE2Rj6sdVGYv4FgkO9-zchKSf2x7piKKK1q4FZDoaSpTUZix4hNLAhorevook58-HR-5_ArY687TMcaVk-QhxDEUFocUFxjWd7CEZEFtgpk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZv1Wm0PicMAJg5mURiG57X_r12u80b-THXzB5skEpCCzQDQ192DZxYh0HiSS37X4w38gxIJSwDsLXPGe63M0ysaQ9z8jC9-Xj3U5vfh9cuyuCo8LSFubZGs3jHy7NNxETsMAOYIxIODnE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZv1Wm0PicMAJg5mURiG57X_r12u80b-THXzB5skEpCCzQDQ192DZxYh0HiSS37X4w38gxIJSwDsLXPGe63M0ysaQ9z8jC9-Xj3U5vfh9cuyuCo8LSFubZGs3jHy7NNxETsMAOYIxIODnE/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>