Today In this article, we’ll show you how to create Expandable Search Box Design Using HTML, CSS & JavaScript. This type of Expandable Search Box is used on the websites For search box. This kind of Expandable Search Box Design looks attractive on the website.
You easily create this Expandable Search Box Design Using HTML, CSS & JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS & JS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Expandable Search Box
In this program (Expandable Search Box), at first, on the webpage, there is a google logo with background color and shadow. When you click on google logo then expandable search box appears with google icon, search typing and microphone as you can see on the image.
Watch the video tutorial to create Expandable Search Box
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Expandable Search Box step by step completely beautifully. So you can learn how to make these Expandable Search Box. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Expandable Search Box Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- How To Make Dropdown Menu Using HTML and CSS
- Neumorphism Login/Register Form UI Design Using JS
- Automatic Image Slider With Buttons Using HTML, CSS & JS
Expandable Search Box | Source Codes
To create this program (Expandable Search Box). First, you need to create three Files one HTML, CSS and another one is JS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Google Search Box</title>
<!----Custom CSS Filw Link--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div id="searchBox">
<img src="image/google.png" id="googleIcon">
<input type="text" placeholder="Search google or type a URL">
<img src="image/microphn.png" class="mic-icon">
</div>
</div>
<script src="js.js"></script>
</body>
</html>
After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: 'Varela Round', sans-serif;
}
.hero{
width: 100%;
height: 100vh;
background-color: #f0f3ff;
display: flex;
align-items: center;
justify-content: center;
}
#searchBox{
border-radius: 55px;
padding: 25px;
background: #f0f3ff;
display: flex;
align-items: center;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
}
#googleIcon{
width: 50px;
cursor: pointer;
}
.mic-icon{
width: 0px;
transition: 0.5;
transition-delay: 0.5s;
}
input{
font-size: 20px;
width: 0px;
border: 0;
background: transparent;
outline: none;
transition: 2s;
}
.active input{
width: 500px;
padding: 12px 20px;
}
.active .mic-icon{
width: 30px;
}After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
var searchBox = document.getElementById("searchBox");
var googleIcon = document.getElementById("googleIcon");
googleIcon.onclick = function(){
searchBox.classList.toggle("active");
}now you’ve successfully created these Expandable Search Box. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.
