Animated spinning search bar using HTML and CSS only.

Hello readers we are back with another interesting post. This post is based on the topic of HTML and CSS.Hope all are doing well and safe. Explore all the contents of our blog and support us.

In this post we are going to learn how to code a animated spinning search bar using HTML and pure CSS.We are going to learn about the appearance of it and how to code it.

What is a search bar?

A search bar is an element in a website that allows you to search the content in the website based on few keywords entered in it. A search bar helps an user to search the contents in the website.

How does the search bar look like and what does it do?

It contains the text box for entering the text.
A button with a search icon.
On focusing the search bar the text box will spin along X axis and expands .
On de-focusing it will again spin in the opposite direction and contracts.

Video for proper understanding.

I have explained the steps involved in coding the search bar . For preview and proper understanding of the code I have provided a youtube video made by me.

Source codes:

Download the codes from here.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="search.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animated search by RiseProgramming</title>
</head>
<body>

<form class="animate" action="/action_page.php">
  <input type="text" placeholder="Search.." name="search" autocomplete="off">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>

The HTML part is quite simple in this case all that matters is the CSS part. Coming to the HTML part I have created a Form with class name set to "animate". Inside this "animate" class all the coding part is written.

The search bar is created through the "input" tag with type="text". Then the styling is done in the CSS part. Then a button of type="submit" is created. Inside the button a search bar icon is created by setting class name to "fa fa-search".

CSS:

html,body{
  width: 100%;
  height: 100%;
  display: grid;
background-color: #2196F3;;

}
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}
form.animate{
  align-items: center;
}
form.animate input[type=text] {
  padding: 10px;
  color: black;
  border-radius: 5px 0 0 5px;
  font-size: 17px;
  border: 1px solid violet;
  float: left;
  width: 100px;
  background: #9df0ef;
  transition:  transform 0.8s , width 1s 0.8s;
  border-style: outset;



}
form.animate input[type=text]:focus{
    box-shadow: 0px 2px 0 #c5e24a;
    transform: rotateX(1080deg);
    width: 80%;




}


form.animate button {
  float: left;
  width:30;
  padding: 10px;
  background:#eec917;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.animate button:hover {
  background: #0b7dda;
}

The CSS plays a major role in customizing the search bar. Let' discuss about the customization one by one.

First customizing the text bar. The padding is set to 10px and color to black and font-size is set to 17px and the border to violet. The text bar is made to float left and required background is given.

Here the "transition" property is set to 0.8 seconds for "transform" and for width 1 second is given with a delay of 0.8 seconds. In "width 1s 0.8s", "1s" specifies the duration for transformation of width and "0.8s" specifies the delay for the width transformation. So that the width will began to increase after the spinning.

On focusing of the search bar few properties are specified. On focusing the bar the box-shadow is set to " 0 2px 0" and the transform property is set to "rotateX(1080deg)" so that the bar would spin 3 times along X axis.

On focusing the search bar the width will increase to 80% with a delay of 0.8 seconds and with a time span of 1 second.

Now the search icon button. It is made to float left, and width to 30px , padding to 10px. The properties like background, font-size and border are specified according to user requirements.

Hope this was helpful.

RiseProgramming

What is a search bar?

How does the search bar look like and what does it do?

You might like these:

Video for proper understanding.

Source codes:

HTML:

CSS:

Thanks for Reading and keep visiting.

Post a Comment

Post a Comment

About Us

Contact Form