Animated Search Bar using HTML and CSS

Hello Coders,

Today we will be creating animated search bar using html and css. Firstly only the search logo will displayed but on hover that will expand and give you the space to write your text.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Bar | Codeithub.com</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
        integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
        crossorigin="anonymous">

    <form action="">
        <input type="search" placeholder="search">
        <i class="fa fa-search"></i>
    </form>
</body>

</html>

CSS Code:

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    background:radial-gradient(#5e6aca, #081825);
}

form{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}

input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
}

.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #05021a;
    text-align: center;
    font-size: 1.2em;
    transition: all .8s;
}

form:hover{
    width: 200px;
    cursor: pointer;
}

form:hover input{
    display: block;
}

form:hover .fa{
    background: #d17b1a;
    color: white;
}

OUTPUT

See also  Lightweight CSS Reset & Normalizer - reseter.css

Examples: Create SVG Animated circle

Leave a Reply

Your email address will not be published. Required fields are marked *