<input type="text" placeholder="Arama" />
input{
       display:block;
       background-color:#788182;
       border:0;
       border-radius:5px;
       width:100px;
       padding:5px 10px;
       color:#fff;
       -webkit-transition:width .5s ease-in-out, background .3s ease;
       -moz-transition:width .5s ease-in-out, background .3s ease;
       -o-transition:width .5s ease-in-out, background .3s ease;
       transition:width .5s ease-in-out, background .3s ease;
}

input:focus {
       width:250px;
       background-color:#50ebd6
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.