Wed Jun 29 2022

Animated Search Bar

CSS6145 views

File Name: animated-search-bar.html

<!DOCTYPE html>
<html lang="en">
<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>Animated Search Bar</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
        }

        body {
            background-color: #383838;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        form {
            position: relative;
        }

        form input[type=text] {
            font-size: 18px;
            width: 0px;
            padding: 8px 0;
            border: none;
            border-radius: 25px 0 0 25px;
            transition: 0.3s all ease-in-out;
        }

        form.active input[type=text] {
            width: 250px;
            padding: 8px 20px;
        }

        form button[type=button] {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0;
            top: 50%;
            transform: translate(50%, -50%);
            border: none;
            border-radius: 100%;
            background-color: #ff9000;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        form button[type=button] svg {
            width: 30px;
            height: 30px;
            transition: 0.3s all ease;
        }
        
        form.active button[type=button] svg.search,
        form button[type=button] svg.close {
            width: 0;
            height: 0;
            opacity: 0;
        }

        form.active button[type=button] svg.close {
            width: 25px;
            height: 25px;
            opacity: 1;
        }
    </style>

    <script>
        function toggleBar() {
            let form = document.getElementById('searchBar');
            form.classList.toggle('active');
        }
    </script>
    
</head>
<body>
    <section>
        <form action="" id="searchBar">
            <input type="text" name="" placeholder="Search..." />
            <button type="button" onclick="toggleBar()">
                <svg class="search" version="1.1" viewBox="0 0 32 32"><circle cx="14" cy="14" fill="none" id="XMLID_42_" r="9" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><line fill="none" id="XMLID_44_" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="27" x2="20.366" y1="27" y2="20.366"/></svg>
                <svg class="close" viewBox="0 0 32 32"><g data-name="Layer 2" id="Layer_2"><path fill="#fff" d="M4,29a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l24-24a1,1,0,1,1,1.42,1.42l-24,24A1,1,0,0,1,4,29Z"/><path fill="#fff" d="M28,29a1,1,0,0,1-.71-.29l-24-24A1,1,0,0,1,4.71,3.29l24,24a1,1,0,0,1,0,1.42A1,1,0,0,1,28,29Z"/></g><g id="frame"><rect fill="none" height="32" width="32"/></g></svg>
            </button>
        </form>
    </section>
</body>
</html>

Result Screenshot(s)

Author:Geekboots