Creating a Simple search bar Animation with HTML & CSS

Hello guys this is my first post here and I'm excited, I decided to keep my first post short, simple and easy to understand so let's get right to it.

Simple animations to your site's search bar can improve its user experience if not much, just a little, I love seeing minimal and simply engineered animations when I visit websites so here's how to add a little something to your search bar.

Starting with the HTML let's add our form and div classes

 <form>
    <div class="search-container">
        <form action="/search">
          <input type="text" placeholder="Search...">
          <button type="submit">Search</button>
        </form>

As some of you already know we are adding our search bar elements to the web page so we can style them with CSS.

.search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #2b2a2a;
    border-radius: 50px;
    transition: border-color 1.5s;
  }

  input[type="text"]:focus {
    border-color: rgb(62, 68, 73);
  }

  button[type="submit"] {
    background-color: dodgerblue;
    color: #fbfcfb;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.8s;
  }

  button[type="submit"]:hover {
    background-color: #04304d;
  }

wow, all that code for a little search bar? well, there could be more but we're just trying to keep things simple here since we're only going to be styling the search bar I haven't added anything to the background. let's break it down a little, shall we?

input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #2b2a2a;
    border-radius: 50px;
    transition: border-color 1.5s;
  }

This little block of code here spaces the search box and submit button away from the top border, it also contains the color properties for the background shadow effect you can also control the radius of the search bar from here.

To control the submit buttons' animation we use this block here

 button[type="submit"] {
    background-color: dodgerblue;
    color: #fbfcfb;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.8s;
  }

And finally to add that hover effect we use...

 button[type="submit"]:hover {
    background-color: #04304d;
  }

And that's it, a simple search bar animation to add a little creativity to your web page, especially for you beginners I hope you enjoyed it.

CONCLUSION.

Sure there are better and cooler-looking animations you can do with CSS and HTML, but we have to start somewhere right? learning the small basics of programming is the easiest way to master it, so chill out and relax, with constant practice and more creativity we'll all get there.