Untitled

<form action="#" class="search">

          <input id="submit" value="" type="submit">

          <label for="submit" class="submit"></label>

          <!-- trigger button and input -->

          <a href="javascript: void(0)" class="icon"></a>

          <input type="search" name="Search" id="search" placeholder="Search">

</form>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

/* Basics */

* {

  box-sizing: border-box;

}

body {

  background: #212121;

}

form {

  width: 200px;

  height: 40px;

  margin: 100px auto 0;

  position: relative;

}

/* Début */

#submit { display: none; opacity: 0; }

form .icon, form .submit { width: 35px; height: 35px; display: block; position: absolute; top: 0; right: 0; }

form .submit { cursor: pointer; }

/* Création de la loupe */

form .icon:after, form .submit:after  { content: ''; position: absolute; width: 80px; height: 80px; border: 18px solid white; border-radius: 50%; left: 10px; top: 9px; }

/* Poignet de la Loupe */

form .icon:before, form .submit:before { content: ''; position: absolute; height: 80px; width: 20px; background: white; top: 100px; left: 111px; transform: rotate(-35deg);

  -moz-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -o-transform: rotate(-35deg); -ms-transform: rotate(-35deg); }

form .icon:hover:after, form .submit:hover:after { border: 18px solid #2980b9; border-radius: 50%; }

form .icon:hover:before, form .submit:hover:before { background: #2980b9; }

/* Styler le input */

form #search { -webkit-appearance: none; height: 11px; width: 0; position: absolute; padding: 0; opacity: 0; border: 2px solid #2980b9; 

  outline: none; position: absolute; right: 35px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/* Fin */

// Début JS

jQuery(document).ready(function($) {

  $('.submit').fadeOut('1');

});

$(".icon").click(function() {

  var icon = $(this), input = icon.parent().find("#search"), submit = icon.parent().find(".submit"), is_submit_clicked = false;

  submit.fadeIn('1');

  // Animation du champs

  input.animate({ "width": "165px", "padding": "10px", "opacity": 1 }, 300, function() { input.focus(); });

  submit.mousedown(function() { is_submit_clicked = true; });

  // On cache l'icone

  icon.fadeOut(300);

  // Et on cache l'input dès la perte de focus.

  input.blur(function() { if(!input.val() && !is_submit_clicked) { input.animate({ "width": "0", "padding": "0", "opacity": 0 }, 200); icon.fadeIn(200); }; });

});