В этой статье рассмотрим, как при помощи чистого стиля CSS создать раскрывающееся форму поиска по сайту. Где изначально будем наблюдать кнопку в оттенке цвета, что сами присвоите, по умолчанию она идет темная. Также подключены шрифтовые иконки, все для того, что по центру кнопки вывести значок, который идет как обозначение.
И только стоит навести на кнопку курсор, как автоматически она в горизонтальном виде начинает увеличиваться, и по сути получается форма поиска. Только уберем клик, как тут же она сворачивается в кнопку, что видели ее по умолчанию при открытие страницы или сайта.
При открытие:
При наведении клика:
Установка:
HTML
Код
<div class="poiskovaya-sistema">
<input type="text" name="search" placeholder="Введите здесь для поиска" class="tekstovoye" />
<a href="#" class="poisk-klusa">
<i class="fa fa-search"></i>
</a>
</div>
CSS
Код
.poiskovaya-sistema {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2e4a65;
border-radius: 38px;
height: 41px;
padding: 10px;
}
.poisk-klusa {
color: #ffe3e0;
float: right;
width: 38px;
height: 41px;
border-radius: 50%;
background: #364a5f;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.poiskovaya-sistema:hover > .tekstovoye {
width: 238px;
transition: 0.7s;
}
.poiskovaya-sistema:hover > .search-btn {
background: white;
}
.tekstovoye {
border: none;
background: none;
outline: none;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
На этом установка завершена, но разве только подключаем шрифтовые кнопки, только в том случай, если они не подключены. Ведь есть много вариантов, где вы сами можете подобрать свою иконку и пол разную функцию.
Демонстрация
