Панель пошуку на чистому HTML/CSS

  • Останнє оновлення: 3 Листопада 2023 р.
  • Перегляди: 196
  • Автор: Адмін
Панель пошуку на чистому HTML/CSS

Колеги всім привіт.

У сьогоднішній статті ми поговоримо про те, як створити панель пошуку на чистому 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;
    }
}

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

СХОЖІ СТАТТІ

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

HTML/CSS - Розгорнута анімація панелі пошуку

HTML/CSS - Розгорнута анімація панелі пошуку

Масштабування зображення на JavaScript - mooZoom

Масштабування зображення на JavaScript - mooZoom