Buscador con efecto hover ^^

¡Hola goshis! :D Hoy no me tocó estudiar por eso del paro colombiano etc, esta bravo oieme :$

En fin, perdón por no publicar me enganché ahora al stardoll gracias a SOFI Muchas gracias sofi ¬¬

  

EN FIN DE NUEVO XDD os traigo un tutorial muy wow! de un buscador :3

Preview aquí

¿Genial no? :3

¿Cómo colocarlo?

Buscan ]]></b:skin pegan antes de el el código:

#cute-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #cute-search br { display: none; }
  #cute-search #search {
    background: -moz-linear-gradient(center bottom , #fc86c5 0%, #fa87ce 50%, #ffe6ff 50%, #fcc2c2 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fc86c5),color-stop(0.5, #fa87ce),color-stop(0.5,  #ffe6ff ),color-stop(25.5, #fcc2c2));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fc86c5', EndColorStr='#ffe6ff ');
    border-radius: 5px;
    padding: 4px;
  }
  #cute-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#f799c7), to(#ffd6ff));
    background: -moz-linear-gradient(-90deg, #ffd6ff, #f799c7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f799c7', EndColorStr='#ffd6ff');
    border: 1px solid #fcc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #fee, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#f73b83;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: verdana;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #cute-search:hover input[type='text'] { color:#f73b83; }
  #cute-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #fc86c5, #ffe6ff);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ffe6ff), to(#fc86c5));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe6ff', EndColorStr='#fc86c5');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #f73b83;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }

Podrán editar al final del tutorial

Ahora en un gadget pega lo siguiente

<div id="cute-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="Url de imagen" type="image"/>
    <input type="text" name="q" value="search" onfocus="this.value='';" onblur="this.value='search';" onmouseover="this.value='';" onmouseout="this.value='search';" />
    </form>
  </div>
</div>

Okay, eso es todo créditos a x