HTML/CSS - Expandable Searchbar Animation

HTML/CSS - Expandable Searchbar Animation

Hello colleagues.

In today's article, we will show you how to create an advanced search bar animation for your website.

 

Requirements:

You need to include the Fontawesome icon library.

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

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Expandable Searchbar Animation</title>
    <script type="text/javascript" src="scripts.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<form action="">
    <input type="search" required>
    <i class="fa fa-search"></i>
    <a href="javascript:void(0)" id="clear-btn">Clear</a>
</form>
</body>
</html>

 

CSS code.

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    background: #293042;
}

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: #293042;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

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

form:hover input,
form:valid input{
    display: block;
}

form:hover .fa,
form:valid .fa{
    background: #07051a;
    color: white;
}


a {
    display: none;
    position: absolute;
    top: 70px;
    bottom:0;
    left: 0;
    right: 0;
    font-size: 20px;
    color: white;
    text-align: center;
    width: 100%;
}

form:valid a {
    display: block;
}

 

JavaScript code.

const clearInput = () => {
    const input = document.getElementsByTagName("input")[0];
    input.value = "";
}

const clearBtn = document.getElementById("clear-btn");
clearBtn.addEventListener("click", clearInput);

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB