Home » Amazing animated search bar using only css & html

Amazing animated search bar using only css & html

November 26, 2020

Hey there, Search bar is one of the most important feature of a website. In this blog we’ll learn how to create a search bar with amazing animation using only HTML & CSS.

Search bar helps a visitor quickly and easily find the info they’re looking for, such as a blog or product. It can also allow them to find important info that they didn’t know they needed, like a service, pricing, or contact info etc.

Essentially, In this video we created a search bar and a beautiful animation when you click on it. We used pseudo element ( ::before ) to create this hover effects.

Video Tutorial of Amazing animated search bar using only css & html

Source Codes

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Search bar</title>
</head>
<body>
    <form action="#" class="search">
        <input type="text" class="search__input" placeholder="Search">
        <button class="search__button">
            <i class="fas fa-search search__icon"></i>
        </button>
    </form>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(./bg.jpg);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.search {
    width: 400px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.search__input {
    width: 90%;
    height: 50px;
    font-size: 18px;
    color: #504f4f;
    background-color: #efefef;
    border: none;
    padding: 15px 30px;
    border-radius: 100px;
    margin-right: -50px;

    transition: all 0.2s;
}

.search__input:focus {
    outline: none;
    width: 100%;
    background-color: #f0eeee;
}

.search__input::-webkit-input-placeholder {
    font-size: 18px;
    color: #ccc;
}

.search__button {
    border: none;
    background-color: #efefef;
    cursor: pointer;

    transition: all 0.2s;
}

.search__button:focus {
    outline: none;
}

.search__button:active {
    transform: translateY(2px);
}

.search__icon {
    font-size: 25px;
    color: #999;
}