Hello friends, today in this video tutorial you will learn How To Create A Responsive Animated Search Bar Using Only HTML And CSS. In the earlier video tutorial we learn How make an Accordion Menu Using JavaScript HTML and CSS.
So Here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's Start learning Responsive Animated Search Bar Using Only HTML And CSS | Responsive Animated Search Bar Using Only HTML And CSS - html css from scratch. So Let's start..
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..
How To Create a Responsive Animated Search Bar Using Only HTML And CSS | Make Responsive Animated Search Bar Using Only HTML And CSS Design Learn how to Make Responsive Animated Search Bar Using Only HTML And CSS - Create Responsive Animated Search Bar Using Only HTML And CSS design using HTML and CSS.
In this tutorial you will learn to create a Responsive Animated Search Bar Using Only HTML And CSS coding, subscribe E-CODEC channel to watch more videos on website designing tutorials for beginners.
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to create an animated search box using HTML and CSS Only</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Custome stylesheet link-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Google fonts link-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="box">
<input type="checkbox" name="tag" id="label">
<div class="serachbox">
<input type="text" placeholder="Search....">
<label for="label" class="btn">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</body>
</html> STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
min-height: 100vh;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.box{
max-width: 400px;
width: 100%;
}
.box .serachbox{
max-width: 50px;
margin: auto;
position: relative;
height: 50px;
box-shadow: 0px 5px 30px rgba(0, 0, 0, .7);
border-radius: 30px;
transition: .5s;
}
.serachbox input{
width: 100%;
height: 100%;
position: absolute;
border: 0;
border-radius: 30px;
padding-left: 20px;
}
.btn{
width: 50px;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
height: 100%;
color: #111;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
cursor: pointer;
}
#label{
display: none;
}
#label:checked~.serachbox{
max-width: 380px;
}
#label:checked~.serachbox .btn{
border-radius: 0px 30px 30px 0px;
background-color: red;
color: #fff;
}
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..
You can also learn:- Learn how to make a tab slider using HTML CSS and JavaScript
0 Comments