In this tutorial, we'll show you how to create an eye-catching animated search bar using just HTML and CSS. Whether you're a beginner or an experienced web developer, you'll learn step-by-step how to build a stylish and functional search bar that will enhance the user experience on your website. Join us to explore the world of web design and improve your coding skills. Let's get started!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b186863b7d.js"
crossorigin="anonymous"></script>
<title>SearchBar</title>
</head>
<body>
<div class="serach-box">
<input type="search" placeholder="Search">
<a href="#"><i class="fas fa-search"></i></a>
</div>
</body>
</html>
style.css
*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.serach-box{
height: 50px;
display: flex;
cursor: pointer;
padding: 10px 20px;
background-color: white;
border-radius: 35px;
align-items: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.serach-box:hover{
background-color: black;
color: white;
}
.serach-box input{
width: 0;
outline: none;
border: none;
font-weight: 500;
transition: 2s;
background: transparent;
text-align: center;
}
.serach-box:hover input{
width: 400px;
font-size: 20px;
color: white;
}
.serach-box a .fas{
font-size: 30px;
}
Comments
Post a Comment