Animated Search Box using HTML CSS & JavaScript

Animated Search Box using HTML CSS & JavaScript | Animation on Search Bar, In this post we are gonna make a search box or search bar with Html and Css and a little of JavaScript. So let’s have some fun…😎

Stylish search box in HTML CSS code

HTML Codes

Here you can find the HTML codes for this project.

<!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>Animated Search Box - Navid Dev</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="middle">
      <form action="" class="search-box">
        <input type="text" class="input" />
        <button class="btn" type="button"></button>
      </form>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CSS Codes

Here you can find the CSS codes for this project.

* {
  padding: 0;
  margin: 0;
  box-sizing: 0;
}

body {
  background: #1abc81;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.input {
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 50px;
  border: 4px solid #fff;
  outline: none;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  transition-delay: 0.4s;
  color: #fff;
  font-size: 20px;
}
.inclicked {
  width: 360px;
  border-radius: 0;
  padding: 0 1rem;
}
.btn {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
.btn::before {
  content: '';
  width: 4px;
  height: 25px;
  background: #fff;
  position: absolute;
  transform: rotate(-45deg);
  bottom: -16px;
  right: -6px;
  transition: 0.3s;
}
.close::after,
.close::before {
  content: '';
  width: 4px;
  height: 34px;
  background: #fff;
  position: absolute;
  bottom: 12px;
  right: 28px;
}
.close::before {
  transform: rotate(-45deg);
}
.close::after {
  transform: rotate(45deg);
}

JAVASCRIPT Codes

Here you can find the JAVASCRIPT codes for this project.

const btn = document.querySelector('.btn'),
  input = document.querySelector('.input');

btn.addEventListener('click', () => {
  btn.classList.toggle('close');
  input.classList.toggle('inclicked');
});

Summary

In today’s topic we learned how to create an animated search bar which we can use almost in every website and application, so be proud of yourself because you learned something new and exciting today. Cheers!

JavaScript Projects