<div>
  <form action="">
    <div class="lupa">
      <input type="search" placeholder="INGRESA TU BÚSQUEDA..."/>
      <span class="mango_lupa"></span>
    </div>
  </form>
</div>

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

body{
  background: #d35400;
}
div, form{
  width:100%;
  text-align:center;
}
.lupa{
  position:relative;
  width:50px;
  height:50px;
  margin: 100px auto;
  cursor:pointer;
  transition:all .3s .4s;
  
}
.lupa input{
  border:5px solid #fff;
  background:transparent;
  width:100%;
  height:50px;
  margin:auto;
  border-radius:25px;
  position:relative;
  cursor:pointer;
  transition:all .3s .4s;
  padding-left:40px;
  box-sizing:border-box;
  color:#fff;
	font-family: 'Droid Sans';
	font-weight:bolder;
}
.lupa input::-webkit-input-placeholder{
  color:#fff;
}
.lupa input:focus{
  outline:0;
}
.lupa .mango_lupa{
  position:absolute;
  bottom:-5px;
  right:-15px;
  display:block;
  width:30px;
  height:5px;
  border-radius:3px;
  background:#fff;
  transform: rotate(45deg);
  transition:all .3s .4s;
  transition-origin: top left;
}
.lupa_buscador{
  width:400px;
}
.lupa_buscador .mango_lupa{
  width:0;
  bottom:0;
  right:0;
}
.lupa_buscador input{
  border-radius:25px;
  padding:10px 20px;
}

$(document).ready(function(){
  $('.lupa').mouseover(function(){
     $('.lupa').addClass('lupa_buscador');
  });
  $('.lupa').mouseleave(function(){
     $('.lupa').removeClass('lupa_buscador');
  });
});