Attractive Search Box Design Using CSS and HTML

In this video, you are going to learn how to design an attractive search box only using HTML and CSS. You can use this search box for a full-screen search page or an element of a page. So Let’s see how to create this search box design.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Search Box</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>

    <!--search box start-->
    <form class="search-box" action="" method="">
      <input type="text" name="" value="" placeholder="Search">
      <button class="search-btn" type="button" name="button">
       <i class="fas fa-search"></i>
      </button>
    </form>
    <!--search box end-->

  </body>
</html>

style.css



body{
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #eee;
}

.search-box{
  font-family: "Candara", sans-serif;
  position: absolute;
  background: #333A45;
  height: 40px;
  padding: 10px;
  border-radius: 40px;
  box-shadow: 0 0 25px 0 rgba(51, 58, 69, 0.4);
}

.search-box input{
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  width: 0px;
  transition: all 0.8s;
}

.search-box:hover input{
  width: 240px;
  padding: 0 6px;
}

.search-box input:focus{
  width: 240px;
  padding: 0 6px;
}

.search-btn{
  border: none;
  background: none;
  outline: none;
  width: 40px;
  margin-top: -21px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.search-btn i{
  z-index: 1;
  background: #00B894;
  font-size: 30px;
  color: #333A45;
  padding: 25px;
  border-radius: 50px;
  box-shadow: 0 0 25px 0 rgba(0, 184, 148, 0.4);
}

#html #css