Skip to main content

Animated Search Box Design | Rustcode

by Rustcode
Animated-Search-Box-Design-HTML-CSS

"Animated search bar for website" is a very common element for every website front-end developer. You can design a search bar(search box) with various animations. You can use various javascript libraries to add animation effects but here we will design a search bar in HTML and CSS.

Our search bar(search box) initially has only a "search bar icon" and then after on hover on that icon, the search box will be shown which looks like a google search box. After removing the mouse from the "search box icon" the search box will hide. That's it.

You can check our simple search box design which looks very cool and attractive. You can also download search box code from there. You can download the "animated search box code" at the end of the post.


SIMPLE SEARCH BOX:


1. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Animated Search Box | Rustcode</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>

  Main content.

</body>
</html>


2. INCLUDE FONT-FAMILY

<!DOCTYPE html>
<html>
  <head>
    <title>Animated Search Box | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>

      main Content.
    
  </body>
</html>



3. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Animated Search Box | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>ANIMATED SEARCH BOX</h1>
      <div class="search-box">
        <input type="text" class="search-box-input" placeholder="What are you looking for ?">
        <button class="search-box-btn">
        <i class="search-box-icon material-icons">search</i>
        </button>
      </div>
    </div>
  </body>
</html>


4. CSS

* {
  box-sizing: border-box;
}

body {
  background: #25283D;
  font-family: roboto, Arial;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #fff;
  font-weight: 400;
}

input,
button {
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

.search-box {
  display: flex;
  background: #08090A;
  border-radius: 4em;
}

.search-box-input {
  width: 0px;
  font-size: 1em;
  color: #fff;
  transition: .5s;
}

.search-box-btn {
  display: flex;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  background: white;
  transition: .3s;
}

.search-box-icon {
  margin: auto;
  color: black;
}

.search-box-input::placeholder {
  color: white;
  opacity: .7;
}

.search-box:hover .search-box-input {
  padding-left: 2em;
  padding-right: 1em;
  width: 340px;
}

.search-box-btn:active {
  transform: scale(.75);
}



5. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.



6. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.




Comments

Post a Comment