HTML
<div class="h_m_search">
<button onclick="Search()" id="sr" width="50px" height="50px">
<img src="img/icon.png" alt=""></button>
<input type="text" id="inp">
</div>
CSS
#sr {
width:100px;
position:static;
max-width: 50px;
height: 50px;
border-radius: 100%;
border:none;
background-color:#ba0000;
box-shadow: -1px 2px 10px black;
}
#inp{
margin-top: 15px;
height: 30px;
border-radius: 100px;
border:2px solid #ba0000;
background:white url(img/icon-red.png) no-repeat 5%;
text-align: center;
display: none;
}
JavaScript
function Search() {
var sr = document.getElementById("sr");
var inp = document.getElementById("inp");
if( inp.style.display !== "none" )
{
sr.style.position = "static"
inp.style.display = "none"
sr.style.width = "50px"
sr.style.height = "50px"
}
else{
sr.style.width = "28px"
sr.style.height = "28px"
sr.style.position = "relative"
sr.style.right = "-35px"
sr.style.top = "1px"
inp.style.display = "inline-block"
}
}