<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

​

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

​

<style>

#search-overlay{width:100%;height:100%;position:fixed;background-color:rgba(0,0,0,0.90);z-index:9999;display:none;top:0;left:0}

#search-overlay .close{font-size:27px;color:#fff;right:20px;top:20px;font-weight:700;position:fixed;cursor:pointer}

form.s{background:transparent;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

input.sb{border:none;padding:10px 0;background:none;color:#fff;outline:none;border-bottom:1px dashed #fff;width:100%;font:17px 'times',monospace;display:inline-block;width:auto;min-width:400px;font-size:20px}

.search-icon{background:transparent;border:none;cursor:pointer;position:absolute;top:18px;right:-32px;color:#fff;font-size:17px}

.btn-search{text-decoration:none;background-color:transparent;color:#333}

.btn-search a{color:#333}

.search-icon:hover,.close i:hover{color:#ff0000;transition:.3s}

</style>

​

<div id='search-overlay'>

    <div class='close'><i class='fa fa-close' title='Close'></i></div>

    <form action='/search' class='s' method='GET'>

        <input autocomplete='off' required="required" class='sb' name='q' placeholder='Type your keywords' type='search' />

            <button class='search-icon' type='submit'>

                <i class="fa fa-search"></i>

            </button>

    </form>

</div>

<script type="text/javascript">//<![CDATA[

    $(document).ready(function() { $(".btn-search").click(function() { $("#search-overlay").fadeIn('slow') }), $(".close").click(function() { $("#search-overlay").fadeOut() }) });

//]]></script>

​

<div class='search-button'>

  <a class='btn-search' href='#' rel='nofollow' title='Search'>

    <i class="fa fa-search"></i>

  </a>

</div>