Alexbelkevich,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.top-block-search input[type="text"] {
position: absolute;
right: 30px;
width: 0px;
border-radius: 10px;
border: none;
padding: 0px;
}
.top-block-search input[type="text"].active {
transition: all .8s ease-in-out;
width: 180px;
padding: 4px;
background-color: #A9A9A9;
}
.top-block-search input[type="text"]:focus {
outline: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('#search-loop').click( function() {
$('#search-text').toggleClass('active')
})
});
</script>
</head>
<body>
<input id="search-loop" name="" type="button" value="go">
<nav class="top-block-search">
<input id="search-text" type="text">
</nav>
</body>
</html>