Botão de busca com jQuery e CSS3

botao de busca com jquery e css3

Botão de busca com jQuery e CSS3

Este formulário de busca é muito bonito e fácil de ser manipulado, contudo vale lembrar dos problemas com relação ao nosso querido Internet Explorer, como suas versões mais antigas não rodam o CSS3, não poderemos contar com todo o poder do plugin.

Este tutorial promete levar o formulário de busca para outro nível. Para ver sua versão original em inglês ou fazer o download é só clicar aqui.

simple-style2

 

 

 

 

 

 

 

 

 

 

Com base na imagem acima, o elemento HTML será composto por 4 elementos, um div para os elementos de capa, um texto de entrada, um botão de entrada para botão de busca e uma pesquisa de imagens. Todos eles vão ser empilhados uns aos outros quando a div capa está no fundo da pilha e pesquisa de imagens no topo. Aqui está o HTML e CSS:

HTML

CSS3

jQuery

Agora vamos ler o evento, clique no botão de busca e animar o formulário usando jQuery.

Clique do usuário alternância script. Primeiro clique irá alargar o wrapper div e de entrada de texto, mova o botão de pesquisa para a borda de entrada de texto e mover-se a pesquisa de imagens para preencher o espaço deixado em branco antes do texto de entrada. Segundo clique voltará ao normal.