HTML
<div class="box">
<div class="search-container">
<input type="search" class="search" placeholder="Поиск..." />
<button class="icon-1"><i class="fa fa-search"></i>S</button>
</div>
</div>
<div class="box">
<div class="search-container">
<button class="icon-2"><i class="fa fa-search"></i>S</button>
<input type="search" class="search" placeholder="Поиск..." />
</div>
</div>
CSS
.search-container{
overflow: hidden;
background: #2b303b;
width: 300px;
vertical-align: middle;
white-space: nowrap;
height: 50px;
line-height:50px;
margin:20px;
border-radius:5px;
}
.search {
border:none;
background:none;
font-size: 16px;
color: #ddd;
padding-left: 15px;
width:85%;
}
.icon-1, .icon-2 {
background:gray;
border:none;
width:15%;
float:right;
transition: all 0.5s ease;
}
.icon-2 {
float:left;
}
.search::-webkit-input-placeholder {
color: #ffd595;
}
.search::-moz-input-placeholder {
color: #ffd595;
}
.search-container:focus {
outline:none;
box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.icon-1:hover,
.icon-2:hover{
background: green;
}
.icon-1:active, .icon-2:active {
background-color:darkgreen;
font-size: 15px;
}
