Панель пошуку на чистому HTML/CSS
- Останнє оновлення: 3 Листопада 2023 р.
- Перегляди: 196
- Автор: Адмін
Колеги всім привіт.
У сьогоднішній статті ми поговоримо про те, як створити панель пошуку на чистому HTML і CSS. Якщо ви шукаєте вікно пошуку CSS із класною анімацією, то це ваш варіант. Вікно пошуку з'явиться, коли курсор наводиться на значок.
Вимоги.
Ми повинні підключити бібліотеку google material icons для додавання іконок.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
HTML Код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Search Bar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
</head>
<body>
<div class="searchBox">
<input class="searchInput" type="text" name="" placeholder="Search">
<button class="searchButton" href="#">
<span class="material-symbols-outlined">
search
</span>
</button>
</div>
</body>
</html>
CSS Код.
body {
background-color: #f5f5f5;
}
.searchBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.searchBox:hover > .searchInput {
width: 240px;
padding: 0 6px;
}
.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}
.searchButton {
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
width: 150px;
padding: 0 6px;
}
}
Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.