//Вариант без js
Берете input уменьшаете его размер до размеров кнопки, ставите фоновый рисунок кнопку какую-нибудь, чтоб он позиционировался справа(или слева, это все в зависимости от ваших капризов) по центру, а далее при наведении на эту кнопку просто увеличиваете размер input.
К сожалению отслеживать нажатия без JS невозможно(либо поправьте меня, если я не прав)
//Вариант с js
function showSearchField(){
//Тут меняем у поля поиска ширину или значение left или просто display: hide, display: inline-block....в зависимости от того какой вариант вам по душе
}
var btn = document.getElementById("searchButton");
btn.addEventListener('click', showSearchField);
Средний
