Animated Search Bar with HTML and CSS

In this article, you will learn how to create Loading Animated Search bar using HTML, CSS.I have shared another snippet based on animation how to create Rotating Words with HTML and CSS. In this tutorial, I have created an Animated Search bar, If you like this article, please also subscribe my YouTube channel - Code Info

CSS Animation:

An animation we could an element steadily alternate from one style to every other. You can change as many css residences you want, as usually as you need. To apply css animation, you have to first specify some keyframes for the animation. Keyframes preserve what patterns the detail can have at positive instances.

Below is the video tutorials. watch and practices

Web site seek is a search engine that focuses entirely on a single website. These web site search equipment are common, and may be located on many websites for the duration of the net. The subsequent time you visit your favorite media outlet or purchasing site, keep your eye out for a seek container or a magnifying glass.

Search bars are an essential part of website functionality and design, and for most people, the use of a website with out a search bar could seem properly, weird. A search bar is a no brainer while designing a website, however honestly beneficial website online search is a lot extra than just having a seek bar.

Studies shows that site visitors that use search are three instances as probable to find what they are seeking out and convert into clients or leads than users that simply browse. Seek is likewise the first-class way for traffic to tell you what they're seeking out and to offer you the opportunity to tailor the internet site to the visitor’s precise wishes.

Source Code:

If you like this Animated Search Bar, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search bar | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <input type="text" name="search" placeholder="Search..." class="input" />

      <a href="#" class="btn">
        <i class="fas fa-search"></i>
      </a>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  background: #aa00ff;
  height: 100vh;
  display: flex;
}

.container {
  margin: 200px auto;
  background: #fff;
  height: 30px;
  border-radius: 30px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.8s;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
.container:hover .input {
  width: 400px;
}
.container .input {
  background: transparent;
  border: none;
  outline: none;
  width: 0px;
  font-weight: 500;
  font-size: 16px;
  transition: 0.8s;
}

.container .btn .fas {
  color: #aa00ff;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

CSS Animation:

You may like this:

Source Code:

1 Comments

Post a Comment

About Us

Contact Form