indez.html

                    <div class="search">
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search fa-2x" aria-hidden="true"></i></button>
                        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
                    </div>

style.scss

        .search {
            background: #FFFFFF;
            padding: 5px 0;
            width: 60px;
            height: 30px;
            position: relative;
            left: 0;
            //float: left;
            line-height: 22px;
            -webkit-transition: all 0.7s ease-in-out;
            -moz-transition: all 0.7s ease-in-out;
            -o-transition: all 0.7s ease-in-out;
            transition: all 0.7s ease-in-out;
            &:hover {

                //width: 230px;
                input, input:focus {
                    width: 170px;
                    margin-left: 60px;
                    border: 1px solid;
                }

            }

            input {
                z-index: 50;
                position: absolute;
                width: 0;
                top: 0;
                float: Left;
                margin-left: 53px;
                -webkit-transition: all 0.7s ease-in-out;
                -moz-transition: all 0.7s ease-in-out;
                -o-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
                height: 30px;
                line-height: 18px;
                padding: 40px 2px;
                border-radius: 1px;
                background: #ffffff;
            }
        }


        .btn {
            z-index: 100;
            position: absolute;
            right: 0;
            top: 0;
            left: 0;
            background-color: #f6f6f6;
            padding: 28px 19px;
            border-radius: 0;
            border: none;
            i {
                opacity: 0.37;
                color: grey;
            }
        }