Expanding search bar exanding to the left and show search button - html

Question

I am using following code and code work fine. but i wanna that when user click on search button then search button will also show like stackoverflow search bar has.
HTML :-
<form>
<input type="text" name="search" placeholder="Search..">
</form>
CSS
input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

Answer 1

Follow these steps
Create a button
Place that button on the search bar
set display property of that button to none
now whenever you focus on the search bar, change display property of that button to block
try implementing this code on your own first ...
input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 90%;
}
input[type=text]:focus + .but{
display: block;
}
.but{
cursor:pointer;
width: 100px;
height: 50px;
position: absolute;
right:5px;
top:5px;
display:none;
}
<form>
<input type="text" name="search" placeholder="Search.."><input class="but" type="button" value = "search">
</form>