Animated Search Box using HTML CSS and Javascript

 

# To create a Animated Search Box using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a Animated Search Box and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Search Box:

                
<div class="search_box">
  <input type="text" name="" id="search_inp" placeholder="Search...">
  <div class="btn_box" onclick="search()" id="btn"></div>
</div>
            

2. Next, add some CSS to create a search box and position the container in the center:

                
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.2s;
 }

 body {
    height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
 }

 .search_box {
    width: auto;
    height: 3rem;
    background-color: white;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    padding-left: 6px;
    padding-right: 6px;
 }

 .search_box input {
    border: none;
    height: 100%;
    width: 0rem;
    font-size: 16px;
    outline: none;
 }

 .btn_box {
    width: 36px;
    height: 36px;
    background: #000 url('./search.png') no-repeat;
    background-position: center;
    background-size: 20px;
    border-radius: 10px;
    cursor: pointer;
 }
 .close{
    background: #000 url('./cross-small.png') no-repeat;
    background-position: center;
    background-size: 20px;
 }

 .show {
    width: 13rem !important;
    padding-left: 12px;
    padding-right: 12px;
    margin-right: 6px;
 }
            

3. Use JavaScript to create a Search Box Animation element inside the container:

                
const search = () => {
    let btn = document.getElementById("btn")
    let inp = document.getElementById("search_inp")
    inp.classList.toggle("show")
    inp.focus();
    btn.classList.toggle("close")
 } 
            

# Search Box in JavaScript HTML and CSS For Full Code 👇

 

Download Full Code

 

* Images Download `url('./search.png')`,`url('./cross-small.png')` .

* Upgrade your website's search functionality with our ` Animated Search Box ` today and provide your users with an interactive and visually appealing search experience. With its easy integration and customizable features, this search box is a must-have for any website looking to elevate its user interface and improve search efficiency.