Foro de Ayuda IntercambiosvirtualeS - Creación de un buscador atractivo

Saludos para todos y Feliz Navidad, en esta ocación les muestro como hacer un buscador atractivamente visual lindo.. como también las tecnicas básicas de como crear el mismo si se fijan y van a los complementos de mozilla verán algo similar, ese bsucador de Mozilla siempre ahnelé hacerlo, pero en ese entonce no podía por eso hoy dia lo comparto con ustedes también, espero y les guste y que le sea de utilidad..

Código html
<body>
<div id="search">
<h2>Buscador Intercambiosos</h2>
<form action="">
<input type="text" class="campo" placeholder="busqueda en Intercambiosos..."/>
<input type="submit" class="btn" value="" />
</form>
<p>Creado por <a href="#">Hectorsito20</a></p>
</div>
</body>

Estilos css
<style type="text/css">
#search form{
width:330px;
height:32px;
padding: 5px 7px 7px;
background: #1B5898;
background-image: -webkit-gradient(linear,left bottom,left top,from( #2e89ca),to( #1b5898));
background-image: linear-gradient( #2e89ca, #1b5898);
background-image: -moz-linear-gradient( #2e89ca, #1b5898);
background-image: -webkit-linear-gradient( #2e89ca, #1b5898);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
padding: 5px 7px 7px;
}
#search form .campo{
width:238px;
float:left;
/*height:24px;*/
padding: 6px 6px 6px 32px;
background-image:url(img/search.png);
background-repeat:no-repeat;
background-position: 7px 50%;
/*outline:none;*/
border-radius:4px;
border: solid 1px #fff;
box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
}
#search form .btn{
background: #84C63C url(img/flecha.png) center no-repeat;
background-image: url(img/flecha.png),-moz-linear-gradient( #84c63c, #489615);
background-image: url(img/flecha.png),-webkit-linear-gradient( #84c63c, #489615);
border: 0;
float: right;
cursor: pointer;
width: 44px;
padding: 6px 10px 7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
-moz-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
border-image: initial;
}
h2{
font-family:tahoma;
font-weight:bold;
font-size:20px;
color:darkred;
}
p{
font-family:Tahoma;
}
p a{
text-decoration:none;
text-align:left;
font-family:Tahoma;
font-size:15px;
color:red;
}
</style>

Resultado final!...

http://i.imgur.com/7NZdi.png