3 Wonderful Search Bar In HTML and CSS

Wonderful Search Bar In HTML and CSS. This post gives some stupid ways to make the wonderful search input an invitation, not a barrier. A high-quality search is a vital part of a website, and the gateway to search is the humble input element.

An outstanding, well-designed search input element boosts the engagement and interaction of the user. It’s a way of saying “Greetings”. How can I help?’ However, there’s a double distance between success and failure. A good search practice means more conversions and better results, but a poorly implemented search annoys customers and turns them away.

3 Wonderful Search Bar In HTML and CSS.

Today, we will present a unique and wonderful search bar design. So, now let’s take a look at search bars.

#1 . Search Bar Hover Animated

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<title>SOFT CODEON ANIMATED SEARCH BAR</title>
<div class="softsearch">
<input type="text" placeholder="Type for SEARCH" spellcheck="false">
<a href="https://softcodeon.com" target="_blank"><i class="fa fa-search"></i></a>
</div>
<style>
:root{--softsearch-boyut:60px;--softsearch-uzunluk:70vw;}
*{  margin:0; padding:0;
    font-family: Arial, Helvetica, sans-serif;
}
.softsearch{
    position: absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    background: #590e3a;
    height:var(--softsearch-boyut);
    border-radius: var(--softsearch-boyut);
    padding:10px; width:auto;
    display:flex; align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,.7);
}
.softsearch a{
    color:black;
    width:var(--softsearch-boyut);
    height:var(--softsearch-boyut);
    background: white;border:none;
    border-radius: 50%;display:flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: calc(var(--softsearch-boyut) * .6);
}
.softsearch input{
    border:none; background: none;
    outline: none; color:white;
    font-size: 120%; padding:0;
    width:0; transition: .3s ease-in;
}
.softsearch:hover > input {
    width:var(--softsearch-uzunluk);
    padding:0 12px;
  }
.softsearch:hover > a {
    background: transparent;
  color:gray}</style>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

In his hover animated search Bar. We wrote simple HTML and CSS code to create an outstanding search Bar.

#2 . Responsive Search Bar HTML and CSS.

<!DOCTYPE html>
<title>SOFT CODEON - Best Style softbox</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div><div class="search">
<input type="text" name="q" class="softbox" placeholder="Type to SEARCH">
<button type="submit" class="softbtn"><i class="fa fa-search"></i></button>
</div></div>
<style>
.search
  {
    position: absolute;	text-align: center;
	width: 100%;left: 50%;top: 50%;
	transform: translate(-50%, -50%);
}
  .softbox{
	transition: border .2s linear;
	font-size: 12px;width: 50%;
	background: #f5f8fa;color: #000;
	padding: 8px 32px 8px 12px;	height: 22px;
	border: 1px solid #e6ecf0;border-radius: 50px;
	outline: none;
  }
.softbox:focus{
	transition: border .2s linear;
	border: 2px solid red;
  }
.softbtn{position: absolute;
	font-size: 20px;color: #66757f;
	background-color: transparent;
	border:none;right: 24%;
	top: 5px;outline: none;
	padding: 4px;
  }
</style>

We’ve created the above responsive search bar with the help of HTML and CSS.

Demo

#3 . Expanding Search Bar

<div class="soft">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search-box">
<input class="s-box" type="text" name="search" placeholder="Type to SEARCH">
<a class="s-btn" href=""><i class="fa fa-search"></i></a>
</div></div><style>
.soft { 
  background: #7D26CD;
  }
.soft .search-box 
  {position: absolute;
  top: 50%; left: 50%;transform: translate(-50%, -50%);
  background: #ccc;height: 40px;border-radius: 40px;border:2px solid black;
  padding: 10px;}
.soft .search-box:hover .s-box 
  {
  width: 240px; padding: 0 6px;
  }
.soft .search-box:hover .s-btn 
  {background: #fff;
  }
.soft .search-box .s-btn 
  {
  color: #7D26CD;float: right;width: 40px;
  height: 40px;transition: .4s;border-radius: 50%;
  background: #ccc;display: flex;justify-content: center;
  align-items: center;
  }
.soft .search-box .s-btn i {font-size: 20px;}
.soft .search-box .s-box 
  {
  border: none;background: none;outline: none;
  float: left; padding: 0;color: #7D26CD;
  font-size: 16px;transition: .5s;
  line-height: 40px;width: 0px;
  }
</style>

This is the last expanding search box designed with the help of HTML and CSS. Please tell us in the comment section which search bar you would like and tell how this article was helpful for you.