<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-property:width;
   -moz-transition-property:width;
     -o-transition-property:width;
        transition-property:width;
-webkit-transition-duration:0.5s;
   -moz-transition-duration:0.5s;
     -o-transition-duration:0.5s;
        transition-duration:0.5s;
-webkit-transition-delay:0.5s;
   -moz-transition-delay:0.5s;
     -o-transition-delay:0.5s;
        transition-delay:0.5s;
-webkit-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
        transition-timing-function:ease-in-out;
}


    input:focus {
    width:250px;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.