HTML CSS3 Search Bar New 2022 (Free Source Code)
HTML is Hyper Text Markup Language. Today I will Create Search Bar Using Pure HTML CSS3
FINAL lOOK OF PROJECT:
Here Is The Code:
First of all Create Document (Named Index) With Extension .html Like This (Index.html)
Then Create file Named (style) With Extension .css Like This (style.css)
COPY THIS HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS SEARCH BAR BY Amaos3/title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="search-box">
<input class="search-input" type="text" name="" placeholder="Search...">
<a href="#" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
</body>
</html>
COPY THIS CSS CODE:
* {
margin: 0;
padding: 0;
background: #6C7A86;
font-family: sans-serif;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: black;
height: 50px;
border-radius: 50px;
padding: 10px;
}
.search-btn {
color: white;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: black;
display: flex;
justify-content: center;
align-items: center;
transition: 2s;
}
.fa-search {
background: black;
font-size: 24px;
}
.search-input {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 20px;
transition: 0.4s;
line-height: 50px;
width: 0;
}
.search-box:hover > .search-input {
width: 250px;
padding: 0 7px;
}
0 Comments